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2014 年 11 月 ， 我 在 ThoughtWorks 西 安 办 公 室 组 织 了 一 次 为 期 3 周 的 Workshop， 名 为 《3 周 3 页 面 》。 每 一 
周 的 两 次 课 上 ， 参 与 者 被 要 求 使 用 HTML/CSS 来 实现 一 个 Web 页 面 。 


个 Workshop 有 点 像 学 绘 男 时 候 的 素 拍 课 ， 所 有 人 都 照看 一 个 设计 稿 (通常 是 设计 症 用 PhotoShop 等 工具 
Midi 个 页 面 ) 来 用 HTML/CSS 实 现 它 。 


参与 者 有 前 问 开 发 ， 非 前 问 开 发 ， 测 试 工 程 病 ， 用 户 体验 设计 病 ， 业 务 分 析 病 等 角色 。 大 部 分 参与 者 在 之 
前 都 或 多 或 少 的 接触 过 CSS， 但 是 又 没有 到 精通 的 地 步 ; 有 很 小 一 部 分 参与 者 之 前 没有 接触 过 Web 设 计 / 开 
发 ， 同 样 ， 有 很 小 一 部 分 参与 者 在 Web 设 计 / 开 发 方面 非常 专业 。 


在 Workshop 中 ， 我 会 在 每 周 的 第 一 次 课 上 讲解 一 些 基础 知识 ， 比 如 如 何 使 用 HTML5 的 新 标签 来 实现 更 加 语 
义 化 的 文档 ， 如 何 使 用 CSS3 的 新 特性 来 实现 阴影 ， bip) 圆 角 等 。 而 在 第 二 次 课 ， 会 安排 一 次 
Showcase， 大 家 将 自己 已 经 实现 了 的 部 分 与 别人 分 享 ， 并 得 到 一 些 反 馈 。 在 Showcase 之 后 ， 我 会 现场 演 
示 如 何 实现 页 面 的 一 部 分 ， x AES DUSBERUE ICD 4 93a d 


结果 这 个 Workshop 得 到 了 很 好 的 反馈 ， 参 与 者 都 投入 了 很 大 的 经 历 和 时 间 来 完成 “作业 ”到 3 周 结束 的 时 
候 ， 绝 大 多 数 人 都 有 了 基本 的 概念 ， 并 且 真 的 可 以 照 着 一 个 设计 稿 来 完成 Web 开 发 部 分 的 工作 。 而 且 根 据 
课 后 的 一 次 问 巷 调查 的 结果 来 看 ， 大 部 分 参与 者 非 浊 乐于 这 种 边 讲 边 练 的 模式 ， 并 且 期 望 学 到 更 多 。 


在 进行 自我 总 结 的 时 候 ， 我 突然 意识 到 ， 这 是 一 个 很 容易 固化 下 来 ， 方 便 其 他 没有 参加 这 个 Workshop 的 人 
的 好 主题 。 于 是 我 决定 将 这 些 内 容 整 理 起 来 ， 做 成 一 个 电子 书 ， 这样 也 可 以 省 去 我 自己 重复 去 讲课 的 厅 
Ko 


一 些 更 新 


《3 周 3 页 面 》 发 布 在 gitbook 上 之 后 ， 出 乎 意料 的 获得 了 很 多 来 自 各 方 的 支持 ， 在 此 一 并 感谢 。 有 一 次 
在 ThoughtWorks 内 部 邮件 里 ， 我 向 同事 们 宣布 了 《3 周 3 页 面 》 已 经 变 成 了 一 €— 结果 收 到 了 
很 多 的 捐赠 ，ThoughtWorks 同 事 们 对 创新 ， 知 识 分 享 的 支持 和 热情 都 倒 我 非常 


在 深圳 出 差 的 时 候 ，selfstore.io 的 创建 者 黄 增 光 联 系 我 ， 希 望 我 可 以 将 本 书 的 PDF 版 本 发 布 在 selfstore.io 
上 上。 发 布 之 后 ， 已 经 有 很 多 读者 购买 ， 在 这 里 感谢 黄 增 光 和 热心 的 读者 们 。 


上 一 个 项 目 结束 之 后 ， 我 难得 的 有 了 几 和 天空， 就 料 上 一 个 项 目 中 涉及 到 的 CSS3 动 田 知 识 整 理 了 出 来 ， 形 
成 了 新 的 一 章 。 动 画 一 章 中 ， 实 例 部 分 的 动画 来 自 于 ThoughtWorks 的 用 户 体 验 设 计 病 唐 婉 莹 ， 她 不 但 慷慨 
的 允许 我 在 书 中 使 用 这 些 设计 稿 ， 而 且 还 教 了 我 很 多 动画 效果 的 实际 做 法 ; 实现 动画 时 ， 在 义理 多 个 元 素 
的 动画 同步 上 我 遇 到 了 难题 ， 同 事 张 霄 囊 给 了 我 热心 的 的 指导 ， 并 帮 有 我 做 出 了 一 个 样 例 ， 在 此 一 并 感谢 。 


后 ， 在 本 书 发 布 之 后 ， 很 多 同事 都 帮 有 我 做 了 积极 的 宣传 ， 使 得 本 书 得 到 了 更 多 的 人 的 关注 ， 这 里 也 一 并 
感谢 。 
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第 一 周 : Find An Agent 


第 一 周 里 ， 我 们 要 实现 一 个 Find an agent 的 页 面 ， 这 是 一 个 非常 典型 的 ， 现 代 的 Web 设 计 稿 。 我 们 会 分 


析 如 何 分 解 页 面 ， 用 标记 语言 编写 ， 然 后 加 入 样式 来 实现 它 。 不 过 在 开始 之 前 ， 我 们 需要 先 熟 悉 一 些 基础 
知识 。 

4 

BH — X 


在 第 一 天 里 ， 我 们 会 学 习 一 些 基本 的 Web 开 发 知识 ， 以 及 一 些 工具 的 使 用 ， 然 后 就 开始 第 一 个 页 面 Find 
an agent 的 实际 开发 。 
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优秀 的 程序 员 都 偏爱 命 合 行 界面 ， 文 本 格式 的 协议 ， 这 样 一 切 都 是 简单 而 可 读 的 ， 上 比如 我 们 每 天 工作 的 
Shell 环 境 : 


gulp serve 
Using gulpfile 
Starting ' NS 
gulp-ruby-sass: directory 
gulp-ruby-sass: write components.css 
gulp-ruby-sass: write components.css.map 
gulp-ruby-sass: write main.css 
gulp-ruby-sass: write main.css.map 


Finished ' ' after 
Starting ' E 
Finished: ' after 
Local URL: 

External URL: 

Serving files from: 

Serving files from: 
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] 
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但 是 对 于 最 终 用 户 (上 比如 在 淘宝 上 购物 的 程序 员 ) 来 说 ， 这 种 界面 是 非常 糟糕 的 。 所 有 的 信息 都 展现 出 来 
了 ， 但 是 没有 优先 级 。 也 就 是 说 ， 强 调 一 切 等 于 什么 都 不 强调 。 


我 们 再 来 看 一 个 例子 


***< 没 钱 赚 丙 店 > 购 物 清单 *** 
名 称 : 5A, KES: 2 瓶 ， 单 价 : 3.00( 元 )， 小 计 : 6.00( 元 ) 
名 称 : 可 口 可 乐 ， 数 量 : 4 瓶 ， 单 价 : 15.00( 元 )， 小 计 : 60.00( 元 ) 


0 
节省 : 3 .00( 元 ) 


对 于 程序 员 来 说 ， 这 样 的 mcum 非常 熟悉 。 但 是 我 们 可 以 做 的 更 好 : 
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没 钱 赚 商 店 


anaa V 


数量 : 2 


可 口 可 乐 C 


数量 : 2 


y 


FERIRA 








总 计 : 60.00 
节省 : 3.00 


同样 的 信息 ， 以 不 同 的 方式 展现 之 后 ， 对 于 信息 的 获得 者 来 说 是 天 天 地 别 的 。 一 个 好 的 用 户 界面 ， 可 以 更 
容易 的 将 信息 传递 出 来 ， 使 得 使 用 者 的 生活 变 得 更 简单 一 些 。 


一 些 基 础 知识 


好 了 ， 我 们 已 经 明白 了 用 户 界面 的 重要 性 。 在 接 下 来 的 章节 中 ， 我 们 讲学 习 如 何 实现 一 个 好 的 用 户 界面 。 
首先 我 们 来 学 习 一 些 接 下 来 要 使 用 的 工具 ， 以 及 一 些 现代 的 工作 方式 。 


Sass 和 Compass 


Sass 是 一 个 CSS3 的 扩展 语言 ， 它 提供 了 丰富 的 特性 使 得 编写 样式 更 加 容易 : REFN, EEL, F 
展 ，mixin 等 等 。 一 且 你 开始 使 用 它 ， 你 融 再 也 回 不 去 了 。 


我 们 可 以 看 几 个 简单 的 例子 来 了 解 Sass 的 基本 语法 ， 上 比如 在 Sass 中 ， 可 以 很 方便 的 定义 变量 : 
$body-color: #efefef; 
$text-color: #4f4f4f; 
body { 


background-color: $body-color; 
Color: text color; 
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a:hover ( 
background-color: $text-color; 
color: $body-color; 


3 2 — T 3E ADRE ERBE : 


$highlight-color: lightgreen; 


.hero ( 
hi ( 
font-size: 4em; 
j 
pi 
color: white; 
a { 
color: $highlight-color; 
} 
j 


上 边 的 代码 经 过 预 处 理 ， 会 生成 这 样 的 css 代码 : 


.hero hi ( 
font-size: 4em; 
$ 
.hero p { 
color: white; 
} 
.heropa{ 
color: lightgreen; 
j 


舟 加 比较 ， 融 会 发 现 Sass 的 语法 比 纯粹 的 CSS 要 简洁 很 多 ， 并 且 可 以 很 容易 的 看 出 层次 天 系 。 


另外 一 个 非常 高 级 的 特性 是 mixin 。 如 果 你 熟悉 Ruby 的 话 ， 那 么 可 以 很 容易 的 将 Ruby 中 的 经 验 用 到 这 里 
Ko AMAL, mixin 机 制 融 是 将 一 段 独立 的 ， 可 复 用 的 代码 植 入 到 当前 的 代码 中 。 


Qmixin radius($radius: 5px) { 
border-radius: $radius; 


j 


.hero ( 
Qinclude radius(10px); 


j 


.gallery ( 
pt 


第 1 周 : 找 中 介 


3 Web Designs in 3 Weeks 


background-color: $body-color; 
Qinclude radius(5px); 


编译 之 后 ， 会 生成 这 样 的 CSS : 


.hero ( 
border-radius: 10px; 


} 


.gallery p { 
background-color: #efefef; 
border-radius: 5px; 


天 于 Sass 融 暂时 介绍 这 么 多 ， 我 们 在 后 边 用 到 的 时 候 再 做 讨论 。 接 下 来 是 Compass 这 个 工具 了 。 简 而 言 


Z, Compass 是 一 个 使 用 了 Sass 的 库 ， 它 将 很 多 常用 样式 打包 成 了 一 些 模块 ， 我 们 可 以 在 自己 的 项 目 中 使 
用 这 些 模 块 ， 比 如 模块 reset 可 以 用 来 料 不 同 浏览 器 的 差异 抹 平 ，css3 则 用 来 生成 css3 相关 的 属性 等 。 


安装 Compass 非 常 容易 : 


$ gem install compass 


安装 之 后 ， 就 可 以 使 用 命 命 行 工 具 compass 来 创建 Sass 工 程 了 : 


$ compass create my-project 


这 条 命令 会 在 当前 目录 下 生成 my-project 目录 ， 并 在 其 中 生成 一 些 配 置 文件 和 相关 的 目录 结构 : 


$ tree my-project 
my-project 
I— config.rb 
I — sass 
| [— ie.scss 
| I—— print.scss 
| L— screen.scss 
L— stylesheets 
[— ie.css 
I — print.css 
L— screen.css 


sass 目录 中 就 是 对 应 的 源 文件 目录 ， 我 们 在 该 目录 中 进行 代码 的 编写 ， 而 通过 下 列 命 全 来 进行 编译 : 


$ compass compile 
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生成 的 css 文 件 位 于 stylesheets 目录 中 。 


使 用 compass ， 只 需要 引入 它 提供 的 模块 ， 融 可 以 生成 民 好 的 跨 浏 览 器 的 css 片段 : 


Qimport "compass/css3"; 


.hero ( 
Qinclude border-radius(10px); 


j 


这 段 代码 会 生成 : 


/* line 3, ../sass/nested-css.scss */ 
.hero ( 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 


j 


Sublime25 23 25 


Sublime 是 一 个 非常 好 用 ， 非 常 现 代 的 编辑 器 。Sublime 是 一 个 跨 平 台 的 编辑 器 ， 你 可 以 在 Windows，Linux 
以 及 Mac OSX 上 使 用 它 。 虽然 它 不 是 免费 的 ， 但 是 如 果 你 不 购买 ， 功 能 上 没有 任何 的 限制 《除了 不 定时 的 
弹出 一 个 对 话 框 外 ) 。 


虽然 Sublime 现 在 地 仅仅 是 第 3 个 版 本 ， 但 是 在 程序 员 群 体 ， 特 别 是 Web 前 端 程序 员 这 个 群体 中 ，Sublime 
的 占用 率 已 经 非常 高 


和 众多 优秀 的 编辑 器 一 样 ，Sublime 提 供 一 个 非 营 不错 的 插件 机 制 ， 这 样 用 户 融 可 以 自由 扩展 它 了 。 


一 旦 你 开始 使 用 Sublime， 首 先 需 要 安装 的 一 个 插件 就 是 管理 其 他 插件 的 插件 : Package Control。 请 按照 其 
官方 站 点 的 介绍 安装 。 


安装 了 Package Control 之 后 ， 我 们 来 安装 几 个 非常 好 用 的 插件 : 


1. Emmet 
2. HTML-CSS-JS Prettify 
3. GitGutter 


安装 插件 非常 容易 ， command + shift + P 打开 命令 窗口 ， 然 后 输入 install package : 
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nested-css.scss 


install 


Package Control: Install Package 
S (rupa; " 





AR Ie dip A Sg CRI] rl E AH, 


nested-css.scss 


git 


Github Tools 


Gitignore 





Emmet 是 一 个 用 于 快速 生成 HTML 片 段 的 工具 ， 他 本 身 并 不 会 独立 存在 ， 事 实 上 它 与 编辑 器 一 起 工作 才能 
施展 出 自己 的 能 力 。Emmet 文 持 众 多 的 编辑 器 ， 比 如 Sublime，Textmate，Notepad++ 等 。 


Emmet 自 己 定义 了 一 个 类 似 CSS 选 择 器 的 语言 ， 你 可 以 用 这 个 语言 快速 的 描述 自己 想 要 的 HTML 文 档 结 
构 ， 然 后 触发 一 个 快捷 键 ，Emmet 会 自动 生成 对 应 的 HTML 片 段 。 


我 们 来 看 几 个 小 的 例子 。 比 如 我 们 需要 一 个 section 元 素 ， 该 元 素 中 有 一 个 h2 元 素 ， 和 3 各 p 元 素 : 


section 
h2 h2 
p p 
p p 


p p 
section 
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如 果 使 用 Emmet 的 语言 来 描述 的 话 ， 我 们 会 写 出 这 样 的 表达 式 : 


section»h2-*p*3 


其 中 > 表示 子 一 级 的 节点 ， 而 + 表示 兄弟 节点 ， 最 后 * 表示 重复 ， 上 边 的 语句 可 以 读 作 :“ 生 成 一 个 
section， 这 个 section 下 有 一 个 h2， 同 时 该 h2 有 3 个 paragraph 作 为 兄弟 ”。 


在 来 看 一 个 稍微 复 末 一 点 的 场景 ， 我 们 有 一 个 长 度 为 10 的 列表 ， 列 表 中 每 个 元 素 都 是 一 个 类 为 item 的 
div， 每 一 个 div 中 ， 有 一 个 h2 元 素 ， 然 后 有 一 个 图 片 ， 图 片 文件 分 别 为 image-1.jpg 到 image-10.jpg o 


那么 ， 我 们 写 出 来 的 Emmet 表 达 式 为 : 


ul>li*10>.item>h2+img[src="image-$.jpg"] 


这 样 它 会 生成 我 们 预期 的 片段 : 


<li> 
<div class="item"> 
<h2></h2> 
<img src="image-1.jpg" alt=""> 
</div> 
«/li» 
«IT 
«div ClLass= Item > 
«h2»«/h2» 
«img src-z"image-2.jpg" alt=""> 
«/div» 
</li> 


</ul> 


.item 会 生成 一 个 class 为 item 的 div 元 素 ， $ mEt ÉSindex, ERRA AHE A 1 F10 的 数 


m 


Fo 


HTML-CSS-JS Prettify 是 一 个 用 来 格式 化 HTML, css 以 及 Javascript 文件 的 插件 。 在 Mac OS XE, 
通过 快捷 键 为 Command + Shift + H 来 触发 格式 化 的 动作 。 


GitGutter 是 一 个 用 来 在 Sublime 的 侧 边 栏 上 显示 当前 文件 在 Git 中 的 状态 的 插件 ， 它 可 以 图 形 化 的 展示 那 
些 内 容 有 修改 等 : 
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Before you get started, please make sure you have 
you actually have a lot of chooses: 


To use it, simply clone this repo and 





前 态 服务 器 


使 用 HTML/CSS 开 发 页 面 的 一 个 好 处 束 是 一 切 都 是 静态 的 ， 如 果 只 是 在 本 地 开发 ， 我 们 芬 至 都 不 需要 任何 
的 服务 器 : 在 浏览 器 中 打开 HTML 文 件 即 可 。 

但 是 一 个 好 的 实践 是 在 本 地 运行 一 个 简单 的 HTTP 服 务 器 。 一 方面 ， 这 个 服务 器 可 以 很 容易 的 将 我 们 的 成 果 
展示 给 其 他 人 ， 另 一 方面 ， 可 以 避免 一 些 不 必要 的 麻烦 : 比如 JavaScript 访 问 服务 器 上 的 资源 时 ， 本 地 文件 
协议 file:// 会 和 http:// 协议 的 请 求 〈 比 如 ajax) 发 生 跨 域 的 限制 。 


Mac OS X 自 带 了 python ， 因 此 可 以 很 容易 的 使 用 python 自 带 的 HTTP 服 务 器 来 : 


$ python -m SimpleHTTPServer 9999 


这 条 命令 会 把 运行 该 命令 的 目录 变 成 一 个 HTTP 的 服务 器 的 根 目 录 ， 并 在 9999 mL1 Eis fg, keia k 
包含 了 


中 包含 了 一 个 index.html ， 那 么 在 当前 目录 运行 该 命令 之 后 ， 束 可 以 在 浏览 器 中 访问 这 个 index.html X 
件 了 。 
LIVeReload 


LiveReload 是 一 个 浏览 器 插件 ， 它 可 以 和 后 台 的 服务 器 相关 的 服务 器 通信 ， 当 服务 器 通知 该 插件 后 ， 该 插 
件 会 目 动 刷新 页 面 。 
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Ruby on Rails: Welcome aboard 



































BS OO /|ijstyle.less — trivial less 


X  style.less 


Welcome aboard 
You're riding Ruby on Rails! 





132 f'getting-sta rted 1 









133 | border-top: 1px solid $ccc; 

134 i margin-top: 25px; 3 

135 ; padding-top: 15px; Getting started 

136  : Here's how to get rolling: 

137 ; lii 

138 | | font-size: i8px; 1l. Use rails generate to create your mo 
139 3 | color: #888; and controllers 

148 : ; margin-bottom: 25px; 

141 : } To see all available options, run it without parameters. 
142 : 1ihz 1 

i43  : TET 2. Set up a cete" route and remove 

144 zl | 
"T | See changes live — 

147 |) f stop hitting refresh. 

148 : lip | 

149 : ! color: #555; Run rake db:create to create your database. If you're not 
i E TE SQLite (the default), edit canfig/database.ym! with yo 
150 . : font-size: 13px; en t), edit canfig/database.yrn! with your us 












































* master, Line 143, Column 11 5paces: 2 LESS 


模板 工程 


方便 起 见 ， 我 已 经 设置 了 一 个 简单 的 模板 工程 ， 这 个 工程 中 包含 了 建立 一 个 Web 设 计 所 需要 的 几乎 所 有 的 
文件 及 配置 


这 个 工程 有 一 下 配置 


1， 一 个 HTML5 的 样板 文件 
2. Compass 的 配置 文件 (用 以 编译 SCSS) 
3. Guard 的 配置 文件 〈 用 以 目 动 刷新 页 面 ) 


Guard 是 一 个 命令 行 工 具 ， 它 可 以 检测 到 本 地 文件 的 修改 。 当 我 们 知道 文件 被 修改 之 后 ， 就 可 以 做 一 些 有 趣 
的 事情 。 上 比如 当 HTML 文 件 发 生变 化 时 ， 我 们 想 要 浏览 器 被 自动 刷新 ， 或 者 当 scss 文 件 发 生 修改 时 ， 我 们 需 
要 触发 Compass 进 行 一 次 编译 。 


其 中 Guardfile 的 配置 如 下 : 


guard 'livereload' do 
watch( 'index.html') 
watch(9eér([stylesheets/.-*N.(css))) 
watch(%r{scripts/.+\.(js)}) 

end 


guard :compass 


这 个 文件 定义 了 两 个 规则 。 第 一 个 是 天 于 livereload 的 : 如 果 当 前 文件 夹 中 的 index.html i 
者 stylesheets/*.css 或 者 scripts/* .js 发生 变化， 都 会 触发 livereload 这 个 任务 。 第 二 
是 compass 的 ， 即 当 sass 目录 中 的 * ,scss 文件 发 生变 化 时 ， compass 会 启动 编译 的 动作 ， 
生成 stylesheets 目录 下 的 *.css ， 然 后 这 又 会 触发 livereload., 
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环境 设置 
有 了 基础 知识 之 后 ， 我 们 来 在 本 地 设置 开发 环境 ， 这 个 配置 方式 我 们 在 后 续 的 章节 也 会 用 到 。 


首先 ， 将 远程 的 模板 工程 下 载 到 本 地 : 
$ git clone gitGgithub.com:abruzzi/design-boilerplate.git mydesign 


然后 在 该 目录 中 执行 bundle install 即 可 (当然 ， 你 需要 先 安装 Ruby) 


$ cd mydesign 
$ bundle install 


这 样 基本 的 安治 束 完 成 了 | 


开发 流程 


我 通常 会 启动 两 个 终端 ， 一 个 用 来 运行 Guard， 另 一 个 用 来 运行 HTTP Server， 最 后 启动 浏览 器 。 


在 终端 1 中 ， 输 入 : 


$ guard start 


be guard 
00:28:12 - INFO Guard is using TerminalTitle to send notifications. 
00:28:12 - INFO Guard::Compass is waiting to compile your stylesheets. 


00:28:12 - INFO LiveReload is waiting for a browser to connect. 


00:28:12 - INFO Guard is now watching at '/Users/jtqiu/develop/design/mydesign' 


[1] guard(main)> 





来 启动 Guard ARAA, Anam P, AA : 


$ python -m SimpleHTTPServer 9999 


启动 HTTP 服 务 器 ， 这 时 候 打 开 浏 览 器 ， 输 入 http://localhost:9999/index.html 应 该 可 以 看 到 : 
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| My Design kN 


各 JE | ] localhost:9999/index.html 
hello, world 





Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, mollitia. Praesentium earum sequi sit eius impedit, id consequatur voluptate labore numquam? Placeat 
vero inventore cupiditate natus, temporibus, voluptates qui necessitatibus? 


这 时 候 ， 在 Sublime 里 打开 整个 工程 ， 编 辑 index.html 文件 ， 结 果 浏 览 器 中 的 页 面 并 没有 自动 刷新 ， 这 是 
因为 我 们 还 没有 连接 浏览 器 和 Guard ， 上 点击 浏览 器 菜单 栏 的 LiveReload 的 图 标 ， 你 应 该 会 在 启 
z) Guard 的 那个 终 靖 中 看 到 这 样 的 提示 : 


00:28:12 - INFO - LiveReload is waiting for a browser to connect. 
00:28:12 - INFO - Guard is now watching at '/Users/jtqiu/develop/design/mydesign' 


[1] guard(main)> 00:35:02 - INFO - Browser connected. 





这 样 两 者 就 连接 起 来 了 。 这 时 候 如 果 你 修改 index.html 或 者 style.scss 文件 ， 页 面 都 会 自动 刷新 了 ! 我 
们 后 续 的 开发 都 假设 你 已 经 完成 了 上 述 的 设置 。 


第 一 个 页 面 


我 们 这 周 选择 的 页 面 ， 来 目 于 dribble， 是 一 个 寻找 房产 中 介 的 站 点 的 设计 : 
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Agents ;- Login | Sign up | 


Relax, Finding An Agent Just Got Easier 


Rec 


Enter a Suburb 


ive proposals from best agent: 


1, 723,000 17, 414 


Transactions Agencies 


Compare 


Magni dolores eos qui ratione vo- 
luptatem sequi nesciunt neque 
porro quisquam est 


Quick 


HOW IT WORKS 


$ 


L 


P 
Receive Proposals 
Duis aute irure dolor in reprehen- 


derit in voluptate velit esse cillum 
dolore eu fugiat 


WHY CHOOSE US? 


€ 


Nemo enim ipsam voluptatem quia voluptas 


sit aspernatur aut odit aut fugit, sed quia 


consequuntur magni dolores eos. 


Easy 


2 


Qui ratione voluptatem sequi nesciunt. 
Neque porro quisquam est, qui dolorem 


ipsum. 


Comprehensive 


Cupidatat non proident, sunt in culpa qui 


officia deserunt mollit anim id est laborum. 


Sed ut perspiciatis unde. 





Testimonials Recent Feedbacks 





10,200 


Suburbs 


Sell with the Best 


Incidunt ut labore et dolore 
magnam aliquam quaerat vo- 
luptatem. 


Free 


Nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis 
aute irure dolor in reprehenderit. 


Independent 


Onsectetur, adipisci velit, sed quia non 
numquam eius modi tempora incidunt ut 
labore et dolore magnam. 


Awesome 


Sed ut perspiciatis unde omnis iste natus 
error sit voluptatem accusantium dolorem- 
que laudantium. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi- 
dunt ut labore et dolore magna aliqua. 


Find An Agent Enter a Suburb 


Blog ContactUs About Us FAQs Privacy 
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ix ^i BeRI—T3bBÉ E gaZAEZA:—T4/ AdSEherog HEBES, —^r fj BJISSRE*, An 
次 是 几 个 独立 的 块 ， 每 个 块 中 的 内 容 相互 隔离 ， 最 后 是 搜索 表单 的 一 个 重复 ， 然 后 是 页 脚 。 


Mocking Up 


根据 我 们 初步 对 设计 的 解读 ， 我 们 可 以 将 页 面 分 解 成 若干 个 小 的 部 分 : 


1. Hero 区 域 (包括 导航 ， 搜 索 表单 ) 
2， 数 字 区 域 (罗列 了 大 干 个 数字 ) 
3， 工 作 方 式 区 域 (How It Works) 
4. 优势 区 域 (Why Choose Us) 

5. 评论 区 域 

6， 底 部 表单 区 域 

7. WR BA 


X —T A IEBJJE AR, AARAA AIR : 


1， 先 将 整个 页 面 的 HTML 编 写 出 来 ， 然 后 添加 CSS 样 式 化 
2， 先 实现 某 个 区 域 的 HTML， 然 后 样式 化 ， 然 后 下 一 个 区 域 


这 两 种 开发 方式 各 有 利 昕 ， 但 是 又 殊 途 同 蚊 ， 你 可 以 选择 适合 目 己 的 方式 。 我 个 人 比较 倾向 于 使 用 第 2 中 方 
陈 。 这 种 方式 可 以 激励 我 进行 下 一 步 的 工作 ， 也 可 以 比较 明确 的 各 诉 我 当前 的 进度 是 什么 。 


下 面 我 们 就 来 按照 从 上 到 下 的 次 序 来 实现 这 个 页 面 。 
Hero 区 域 


在 现代 的 Web 设 计 中 ， 设 计 症 会 料 一 个 巨大 的 图 片 设置 在 最 醒目 的 位 置 ， 这 张 图 片 被 称 为 Hero 
Image, Hero Image 一 般 会 和 主题 相关 ， 但 是 有 不 至 于 喧 宾 夺 主 (通常 会 选择 加 上 模糊 路 径 或 者 色彩 偏 暗 
的 图 片 ) o 


在 Hero 区 域 ， 我 们 可 以 看 到 一 个 logo， 三 个 导航 按钮 ， 一 个 主 标题 ， 一 个 副标题 ， 一 个 搜索 表单 。 对 应 
的 ， 我 们 可 以 很 直观 的 将 其 翻译 为 HTML 文 档 : 


«section ClLass= hero > 
<header> 
«img src-"images/logo.png" alt-'"logo"» 
«ul» 
«li»-Agents«/li» 
«li»Login«c/li» 
<li>Signup</li> 
</ul> 
</header> 
<h1>Relax, Finding An Agent Just Got Easier</h1> 
<h2>Receive proposals from best agents for free</h2> 
<form action=""> 
<input type="text" placeholder="Enter a suburb"><input type="button" value="searc 
</form> 
</section> 
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对 应 的 Emmet 表 达 式 如 下 : 


section.hero»(header»img*ul-»1i*3)-hi-rh2-*(form»input[typez"text"]-*-input[type-z"button"]) 


此 时 没有 添加 任何 样式 ， 我 们 看 到 的 页 面 是 这 样 的 : 


贺 My Design 


i | | localhost:9999/index.html DE. 








Agents 

Login 

Signup 

Relax, Finding An Agent Just Got Easier 
Receive proposals from best agents for free 


Enter a suburb search 





让 我 们 来 编写 一 个 scss 代码 : 


御 先 我 们 将 所 有 的 文本 都 居中 对 齐 : 


body ( 
font-size: 62.596; 
text-align: center; 


然后 将 logo 和 导航 都 浮动 起 来 ，logo 浮 动 在 左 侧 ， 导 航 浮 动 在 右 侧 : 


header ( 
img 1 
width: 8em; 
height: 2em; 
float: left; 
J 
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ul { 
float: right; 


TET 
float: left; 
margin: 0 .5em; 
padding: 1em; 


J 


Qinclude clearfix; 


注意 底部 的 clearfix 这 个 mixin ， 这 是 对 于 浮动 元 素 的 一 个 清除 ， 


^. header 之 后 的 元 素 会 在 布局 上 受到 影响 。 


做 完 这 些 调整 之 后 ， 我 们 的 scss 代 码 融 成 了 : 


.hero ( 
max-width: 100em; 
margin: 0 auto; 


header ( 
img { 
width: 8em; 
height: 2em; 
float: left; 
j 
ulaf 
float: right; 
li 
float: left; 
margin: © .5em; 
padding: 1em; 
j 
j 
Qinclude clearfix; 
j 
Tf 
font-size: 4em; 
padding: 1em 0 .5em 0; 
j 
I2 
font-size: 2em; 
j 


而 对 应 的 界面 上 的 基本 布局 已 经 有 了 : 
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li My Design | 


| | localhost:9999/index.html 





"A Agents Login Signup 


Relax, Finding An Agent Just Got Easier 


Receive proposals from best agents for free 


search 


让 我 们 为 当前 的 设计 找 一 张 合 适 的 主题 图 片 。 由 于 站 点 本 身 是 与 找 房 子 相 天 的 ， 因 此 我 们 可 以 找 一 些 包含 
建筑 ， 城 市 等 主体 的 图 片 。 


下 面 这 张 图 片 是 我 在 ThoughtWorks 西 安 办 公 室 用 手机 拍摄 的 ， 我 用 PhotoShop 做 了 一 些 简单 的 久 理 : 
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然后 给 hero 添加 背景 图 片 ， 同 时 ， 由 于 背景 颜色 变 深 ， 因 此 我 们 采用 白色 作为 文字 颜色 : 
background: url('/images/find-an-agent-hero.png'); 
background-size: cover; 


color: $highlight-text-color; 


本 My Design 


过 = JE | | localhost:9999/index.html 


Relax, Finding An Agent Just Got Easier 
Receive proposals from best agents for free 


(Enter a suburb 


接 下 来 ， 我 们 来 样式 化 搜索 表单 ， 如 果 仔 细 观 察 ， 有 一 些 细节 需要 人 处理: 


1. RIENE m y XS BH 
2， 搜 索 框 的 堪 上 角 和 左下 角 有 圆 角 
3， 按 钮 的 右上 角 和 右 下 角 有 圆 角 


form { 
padding: 2em 0 4em 0; 


input[typez"text"] { 
padding: 1em; 
border: 0; 
width: 18em; 
border-radius: 2px © © 2px; 
background: $bg-color; 
opacity: .3; 
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input[type-z"button"] ( 
color: $highlight-text-color; 
padding: 1em; 
border: 0; 
width: 6em; 
border-radius: 0 2px 2px 0; 
background-color: lightgreen; 


注意 此 处 的 border-radius 属性 ， 它 可 以 分 别 制定 四 个 角 的 圆 角 半径 ， 次 序 分 别 为 : EE, Gb AF, 
左下 。 对 于 按钮 ， 我 们 可 以 看 到 设计 稿 上 的 颜色 为 淡 绿 色 ， 这 里 先 用 lightgreen 作为 占 位 符 ， 我 们 下 一 
步 会 料 其 修改 为 真实 的 颜色 。 


现在 的 界面 效果 如 下 : 


| BUMP 


e JE | | localhost:9999/index.html 


Relax, Finding An Agent Just Got Easier 


Receive proposals from best agents for free 


Enter a suburb search 





我 们 还 需要 一 些 细节 需要 人 处理 ， 比 如 sign up 按钮 的 边框 ，logo 等 : 
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EUDES 


€ €i | | localhost:9999/index.html E. 


e t 


Relax, Finding An Agent Just Got Easier 


Receive proposals fiom best agents for free 


search 








对 于 导航 ， 我 们 先 为 每 一 个 1i 都 设置 了 透明 的 1 个 像素 的 边框 ， 然 后 对 最 后 一 个 ， 也 就 是 Signup 按钮 ， 
设置 了 1 个 像素 的 白色 边框 ， 同 时 设置 了 半径 为 2 个 像素 的 圆 角 。 


li ( 
float: left; 
margin: 1em .5em; 
padding: .5em 1em; 
border: 1px solid transparent; 
border-radius: 2px; 


&:last-child ( 
border: 1px solid $highlight-text-color; 
j 


注意 此 处 的 & 符号 ， 它 表示 1i 元 素 自 身 ， 上 述 的 表达 式 相 当 于 : 
li:last-child {} 
Pav — 
第 二 天 
我 们 在 第 一 天 已 经 学 习 了 很 多 的 基础 知识 ， 而 且 学 会 了 现代 的 前 新 开 发 流程 (使 用 LiveReload 节 省 了 我 们 
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很 多 的 时 间 ， 使 用 Emmet 编 写 HTML 更 是 键 动 如 飞 ) 。 同 时 ， 我 们 还 一 步 步 的 开发 了 Find an agent 页 面 
的 Hero 区 域 。 


但 是 这 个 区 域 并 没有 完全 和 设计 图 匹配 ， 上 比如 颜色 ， 位 置 ， 字 体 等 ， 我 们 今天 来 接着 完成 。 
在 开始 之 前 ， 我 们 可 以 先 来 学 习 另 外 一 些 基础 知识 。 
字体 


研究 发 现 ，Web 设 计 ， 有 95% 都 是 与 排版 相关 。 换 言 之 ， 不 论 你 的 设计 是 专注 于 哪个 方面 ， 内 容 都 是 最 重 
要 的 。 而 作为 展现 内 容 的 字体 ， 则 螺 无 疑问 的 非 单 重要。 


浏览 器 默认 的 字体 非常 简单 ， 在 可 读 性 上 并 没有 问题 ， 但 是 并 不 美观 。 字 体 在 大 的 方面 可 以 分 为 两 类 : 衬 
线 字 体 (Serif) 和 无 衬 线 字 体 (Sans Serif) 。 所 谓 衬 线 ， 就 是 在 文字 上 的 一 些 修饰 性 的 线 ， 浏 览 器 默认 的 
字体 就 是 衬 线 字 体 。 


社 线 字体 是 比较 经 典 的 字体 ， 从 古 罗 马 文字 始 ， 殊 开始 作为 正式 的 印刷 字体 而 存在 。 无 衬 线 字体 则 非 弟 简 
单 ， 而 且 更 加 易 读 。 两 者 的 区 别 可 以 在 下 面 这 个 图 中 看 出 : 


根据 名 称 来 选择 字体 是 非常 困难 的 ， 我 们 可 以 使 用 Google Font APl 来 简化 这 个 过 程 。 Google Font 
API http://www.google.com/fonts， 我 们 只 需要 选 好 目 己 喜欢 的 字体 ，Google 会 生成 一 个 link， 然 后 我 们 在 
自己 的 页 面 中 应 用 这 个 link 就 可 以 使 用 该 字体 了 。 
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E BUMP x 7 Google Fonts 


bd 





€e © | | www.google.com/fonts SE 


Google FO nts More scripts About Analytics New to Google Fonts? 


657 font families shown Word Sentence Paragraph 


Preview Text: Grumpy wizards make toxic brew for the evi * 


. Normal 400 
Filters: 


All categories v 


» Thickness 
» Slant 
» Width 


Script: Normal 400 


mm z Grumpy wizards make toxic brew for the e' 


» Collection (0 font families) 


Grumpy wizards make toxic brew fo 


Add to Collection 


Open Sans, 10 Styles by 








比如 ， 我 们 选中 了 Open Sans ，Google 会 生成 一 个 对 应 的 link : 


«link hrefz'http://fonts.googleapis.com/css?family-Open-Sans:300italic,400italic,600itali 


pp] 


然后 在 scss 文件 中 使 用 该 字体 


body (1 
font-family: 'Open Sans', sans-serif; 
font-size: 62.596; 
text-align: center; 


应 用 了 该 字体 之 后 ， 我 们 的 界面 会 变 得 更 加 接近 设计 稿 : 
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| My Design m 
e le | | localhost:9999/index.html yv © 


Agents Login 


Relax, Finding An Agent Just Got 


Easier 


RecewepropoSals from best agents for free 


search 








我 们 来 接着 第 一 天 的 成 果 ， 对 页 面 元 素 进 行 一 些 细 化 。 首 先 我 们 需要 抽取 设计 稿 上 的 颜色 ， 有 很 多 工具 可 
以 帮助 我 们 做 到 这 一 点 ， 上 比如 在 Mac OS X 上 有 个 工具 SIP ， 使 用 它 可 以 很 方便 的 抽取 页 面 元 素 的 颜色 ， 快 


捷 键 为 Ctrl+0ption+P 。 


第 1 周 : 找 中 介 


25 


3 Web Designs in 3 Weeks 


Relax, Finding An Agent Jus% 


Receive proposals from best agent 


Enter a Suburb ð 





抽取 出 颜色 之 后 ， 将 这 些 颜色 定义 为 sass 的 常量 : 


$bg-color: £efefef; 
$text-color: #4f4f4f; 
$secondy-text-color: 4ZD9DADA; 
$highlight-text-color: white; 
$button-color: £4Z6cdcac; 


然后 将 页 面 元 素 的 位 置 做 一 些微 调 ， 会 得 到 这 样 的 效果 : 
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li My Design p 


€e eM | | localhost:9999/index.html SE 
Agents Login 


RelaX su ME nid jüst Got Easier 


Receive proposals from best agents for free 


SEARCH 








一 些 需 要 注意 的 细节 ， 比 如 我 们 通过 text-transform: uppercase; 3&'RHSsRi1E42 EBJXCE NAE ; È 


标题 的 字体 权重 家 中 一 号 font-weight: bold; ; 副标题 的 颜色 比 主 标题 蜡 一 些 ， 颜 色 值 为 #d9dada o 


到 目前 位 置 ， 页 面 已 经 相当 接近 设计 稿 了 。 我 们 可 以 暂时 保持 现状 ， 然 后 开始 后 边 部 分 的 开发 。 按 照 顺 
序 ， 我 们 下 面 来 实现 数字 区 域 。 


这 个 区 域 很 清晰 的 可 以 用 一 个 列表 来 实现 ， 列 表 的 长 度 为 4， 每 个 条 目 中 都 有 两 个 标题 ， 一 个 数字 ， 一 个 说 


HH : 


«section class="numbers"> 
«ul» 

«li class-"'"number"» 
«h2»220,000«/h2» 
«h3»-Agents«/h3» 

«/li» 

«li class-"'"number"» 
«h2»1, 723, 000«/h2» 
«h3»Transactions«/h3» 

«/li» 

«li class-"number"» 
«h2»217,444«/h2» 
«h3»Agencies«/h3» 

</li> 

<li class="number"> 
<h2>10, 200</h2> 
<h3>Suburbs</h3> 
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</li> 
«/ul» 
«/section» 


section.numbers»ul»li*4»5h2-h3 


首先 ， 我 们 需要 让 这 个 列表 横向 排列 ， 这 个 很 容易 ， 只 需要 将 他 们 设置 为 浮动 即 可 : 


li { 
float: left; 
width: 25%; 


| My Design UA 
& € | ] localhost:9999/index.html 


Relax FindingAn Agent Just Got Easier 


Receive proposals from best agents for free 


SEARCH 


20,000 1,723,000 


17,444 10,200 
Agents Transactions Agencies Suburbs 





而 根据 设计 稿 中 可 以 看 到 ， 数 字 区 域 并 没有 占用 100% 的 宽度 ， 而 是 占用 了 80% 左 右 。 因 此 我 们 需要 
将 li 的 父 元 素 设置 一 个 宽度 ， 并 使 得 其 居中 对 齐 : 


.Numbers { 
width: 8096; 
margin: 0 auto; 
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接 下 来 ， 我 们 需要 整个 数字 区 域 浮动 起 来 ， 它 有 一 半 在 Hero 区 域 中 ， 另 一 半 则 在 How it works 的 区 域 。 


.humbers ( 
width: 80%; 
margin: 0 auto; 


ul { 
position: relative; 
Gop rem, 
background: $bg-color; 


i 
float: left; 
width: 25%; 


Qinclude clearfix; 


然后 我 们 开始 细 化 整个 数字 区 域 ， 调 整 字 体 ， 内 间距 ， 外 间距 等 : 


1 
float: left; 
width: 25%; 
box-sizing: border-box; 
border-top: 1px solid $secondy-text-color; 
border-bottom: 1px solid $secondy-text-color; 
border-left: 1px solid $secondy-text-color; 


&:last-child { 
border-right: 1px solid $secondy-text-color; 


j 
h2 ( 
font-size: 2em; 
padding: 1em 0; 
j 
h3 (1 
padding: 0 0 2em 0; 
j 


第 1 周 : 找 中 介 


3 Web Designs in 3 Weeks 


li My Design WA 


€ eM | ) localhost:9999/index.html SES 
Agents Login | Sign up | 


NEPOS IE MT C end Just Got Easier 


Receive proposals from best agents for free 


SEARCH 











20,000 1,723,000 10,200 


Agents Transactions Agencies Suburbs 


17,444 





全 





接 下 来 我 们 就 可 以 开始 How it works 部 分 的 开发 了 ， 根 据 上 面 的 经 验 ， 我 们 事实 上 可 以 很 容易 的 将 HTML 


桂山 来; 


«section class-"how-it-works"» 
<h2>How it worksc/h2» 


«ul» 
«l1 
«div class-'detail'» 
«span class-"number"»1«/span-» 
«i class-"icon-list"»«/i» 
«h3»Compare«/h3» 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
«/div» 
</li> 
SRE- 
<div class="detail"> 
«span class="number">2</span> 
<i class="icon-pencil"></i> 
<h3>Receive Proposals</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div> 
</li> 
<li> 


<div class="detail"> 
«span class="number">3</span> 
<i class-"icon-users"»«/i» 
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<h3>Sell with the Bestc/h3» 
«p»Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum tempor 
«/div» 
«/li» 
«/ul» 
«/section» 





这 段 HTML 片 段 中 有 很 多 Lorem 开头 的 随机 文本 ， 这 些 文 本 可 以 通过 sublime 自动 生成 ， 你 只 需要 在 编辑 
器 中 输入 lorem ， 然 后 按 TAB 键 即 可 。 这 在 进行 Web 设 计时 非常 方便 。 


观察 设计 稿 ， 我 们 发 现 了 三 个 不 同 颜色 的 图 标 。 我 们 当然 可 以 将 这 三 个 图 标 从 图 片 中 截取 出 来 ， 或 者 找到 
设计 病 ， 让 他 提供 给 我 们 。 但 是 事实 上 还 有 一 种 选择 ， 就 是 使 用 字体 图 标 (fonticon) 。 


字体 图 标 


字体 图 标 ， 顾 名 思 义 ， 是 一 个 字体 ， 但 是 看 起 来 又 是 一 个 图 标 。 要 使 用 字体 图 标 ， 需 要 下 载 一 个 /一 组 字体 
文件 ， 然 后 在 CSS 文 件 中 使 用 该 字体 中 的 某 些 字符 (通常 这 些 字 符 都 不 会 和 正文 所 用 的 文字 冲突 ， 他 们 会 
选择 Unicode 中 的 一 些 保留 码 ) 。 


eoo GLYPHICONS Halflings 

* +E- ex "^Ynoeex-*x 2H 
a zz W X $$ GO 4 & gm f hk OA KL 
o9011í00Cc 2 E Á " ("€ - iE Ill V 
qv 8 Rà GG AB I IT I E x s zs xs: 


Install Font 








目前 已 经 有 很 多 字体 图 标 ， 其 中 有 收费 的 ， 也 有 很 多 免费 的 。 我 们 这 里 会 使 用 免费 的 icomoon， 同 类 型 的 还 
有 fontawesome 等 。 


在 icomoon 上 选择 一 些 自己 需要 的 图 标 之 后 ， 选 择 下 载 。 下 载 之 后 的 包 中 包含 了 字体 文件 ， 和 一 个 示例 。 首 
先 需要 将 fonts 目录 拷贝 到 我 们 的 工程 中 ， 其 中 会 包含 这 样 几 个 文件 : 


$ ls fonts 
icomoon.eot icomoon.svg icomoon.ttf  icomoon.woff 
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然后 将 style.css 拷贝 到 sass 目录 中 ， 并 重 命 名 为 icomoon.scss 。 最 后 ， 在 style.scss 文件 中 引入 这 


个 icomoon 文件 : 


Qimport "icomoon"; 


你 可 能 需要 根据 实际 的 位 置 修改 icomoon.scss 文件 中 相对 fonts 的 路 径 : 


Qfont-face { 

font-family: 'icomoon'; 

src:url('../fonts/icomoon.eot?200299'); 

src:url('../fonts/icomoon.eot?Ziefix200299') format('embedded-opentype'), 
url('../fonts/icomoon.woff?200299') format('woff'), 
url('../fonts/icomoon.ttf?200299') format('truetype'), 
url('../fonts/icomoon.svg?200299Zzicomoon') format('svg'); 

font-weight: normal; 

font-style: normal; 


如 果 你 观察 过 我 们 之 前 的 HTML 上 片段， 融会 发 现 其 中 有 一 些 i 标签 ， 这 些 标签 的 class 都 是 以 icon- 开始 
的 。 你 会 在 icomoon.scss 中 找到 实际 的 定义 : 


.lcon-zoom-out:before ( 
content: "Ne62b"; 
j 


.licon-zoom-in:before { 
content: "Ne62c"; 


此 处 的 content 实际 就 是 一 个 unicode 的 编码 ， 对 应 在 字体 文件 中 的 一 个 图 标 。 


这 些 图 标 展现 出 来 正如 图 片 一 样 : 
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EUDES 


€ JE | ] localhost:9999/index.html 


Relax, Finding z An Agent Just Got Easier 


Receive proposals from best agents for free 


SEARCH 








20,000 10,200 


Agents Transactions Agencies Suburbs 


1,723,000 17,444 


HONO 


Compare 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum temporibus cupiditate asperiores voluptatum ipsam, labore, incidunt eos at sunt, 
mollitia et nemo P» consequatur! 
2 


Receive Proposals 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum temporibus cupiditate asperiores voluptatum ipsam, labore, incidunt eos at sunt, 
mollitia et nemo ullam consequatur! 


Sell with the Best 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum temporibus cupiditate asperiores voluptatum ipsam, labore, incidunt eos at sunt, 
mollitia et nemo ullam consequatur! 








"PARE EBUREAS TET, CART, m BuEuEESBRERRG. ÉHCTGAEEAIeH), TW AE 
何 种 比例 ， 都 不 会 发 生 模糊 。 另外 ， 由 于 它 本 身 是 字体 ， 那 么 设置 颜色 又 会 变 得 非 弟 容易 ， 丈 像 修 改 文本 


颜色 一 样 。 


对 于 每 个 条 目 ， 我 们 首先 还 是 让 其 浮动 起 来 ， 然 后 设置 宽度 为 1/3 


li f 
float: left; 
widtn 39.999 


对 于 每 一 个 数字 ， 我 们 可 以 很 容易 的 为 其 设置 样式 : 


.humber { 
font-size: 2em; 
color: $border-color; 
border: 1px solid $border-color; 
width: 1em; 
height: 1em; 
display: block; 
margin: 1em auto 2em auto; 
padding: .4em; 
Qinclude border-radius(10096); 
background-color: $bg-color; 
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对 于 每 个 图 标 ， 它 们 都 有 不 同 的 颜色 : 


ii 


font-size: 3.6em; 


Con= llst { 
color: ZECA95A; 


.icon-pencil { 
color: £ZAC9CD2; 


.lcon-users ( 
color: £Z4D99CB; 


定义 好 这 些 之 后 ， 整 体 上 的 效果 已 经 有 了 了， 数字， 图 标 ， 挡 述 等 : 


| RUMP 


€ E | | localhost:9999/index.html 





20,000 1,723,000 17,444 10,200 


Agents Transactions Agencies Suburbs 


HOW IT WORKS 


9 (2) (3) 
E "2 R 


Compare Receive Proposals Sell with the Best 
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Earum temporibus adipisicing elit. Earum temporibus adipisicing elit. Earum temporibus 
cupiditate asperiores voluptatum ipsam, cupiditate asperiores voluptatum ipsam, cupiditate asperiores voluptatum ipsam, 
labore, incidunt eos at sunt, mollitia et labore, incidunt eos at sunt, mollitia et labore, incidunt eos at sunt, mollitia et 
nemo ullam consequatur! nemo ullam consequatur! nemo ullam consequatur! 





对 照 之 前 的 设计 稿 ， 会 细节 的 地 方 有 所 缺失 ， 比 如 How it works 下 面 的 一 个 灰色 指示 条 ， 三 个 
数字 之 间 的 连 线 等 ， 这 些 细节 非 剃 重要。 我们 有 两 种 方式 可 以 实现 这 些 细节 ， 第 一 种 是 修改 HTML 文 档 ， 添 
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加 一 些 额外 的 元 素 ， 这 种 做 法 的 缺点 是 为 了 展现 而 修改 了 内 容 。HTML 文 档 本 有 身 仅仅 应 该 包含 内 容 ， 而 不 应 
该 包含 样式 。 因 此 我 们 更 倾向 于 使 用 第 二 种 方式 : 伪 元 素 。 


HTC 


伪 元 素 是 一 个 不 存在 在 HTML 代 码 中 的 元 素 ， 但 是 你 又 可 以 为 其 设置 样式 。 这 就 给 了 我 们 一 种 方便 的 机 制 ， 
在 不 影响 HTML 文 档 结 构 的 情况 下 ， 加 入 一 些 伪 元 素 ， 并 为 其 设置 祥 式 ， 这 样 融 可 以 很 好 的 解决 我 们 上 面 
遇 到 的 问题 。 


每 一 个 HTML 元 素 都 可 以 有 两 个 伪 元 素 ， 这 两 个 伪 元 素 可 以 分 别 使 用 :before 和 :after 来 选中 : 


p::before ( 
content: ""; 
display: block; 
color: #6e6e6e; 


比如 对 于 How it works 这 个 标题 ， 我 们 可 以 使 用 一 个 伪 元 素 ， 然 后 为 其 设置 颜色 ， 位 置 等 ， 使 其 和 设计 
入 一 致 : 


h2 ( 
font-size: 2em; 
text-transform: uppercase; 
padding: 1em 0; 


&:after ( 
display: block; 
content: ""; 
background-color: S$border-color; 
width: 2em; 
height: .1em; 
margin: .4em auto; 


这 样 ， 我 们 的 How it works 下 面 就 会 多 出 一 条 粗 线 : 


HOW IT WORKS 








同样 ， 我 们 为 效 字 也 加 入 伪 元 素 : 


li { 
&:before { 
display: block; 
content: ""; 


background: $border-color; 
width: 100%; 
height: 1px; 
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position: absolute; 
top: 4em; 

left: 5096; 

margin: 0 2em; 


j 


&:last-child:before ( 
display: none; 


j 


我 们 为 每 个 li 都 添加 了 一 个 before 伪 元 素 ， 并 为 其 设置 了 样式 〈 一 条 灰色 的 直线 ) ， 这 样 最 后 的 那个 li 融会 多 
出 一 条 来 ， 我 们 将 其 隐藏 。 最 后 的 效果 如 下 : 


EUDES 


g= ii | | localhost:9999/index.html 





20,000 1,723,000 17,444 10,200 
Agents Transactions Agencies Suburbs 

Q a 9 

e on e 

QD m 

Compare Receive Proposals Sell with the Best 
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Earum temporibus adipisicing elit. Earum temporibus adipisicing elit. Earum temporibus 
cupiditate asperiores voluptatum ipsam, cupiditate asperiores voluptatum ipsam, cupiditate asperiores voluptatum ipsam, 
labore, incidunt eos at sunt, mollitia et labore, incidunt eos at sunt, mollitia et labore, incidunt eos at sunt, mollitia et 
nemo ullam consequatur! nemo ullam consequatur! nemo ullam consequatur! 





好 了 ， 我 们 第 一 天 涉及 的 东西 已 经 很 多 了 ， 剩 余 的 部 分 就 交 给 读者 自己 练习 了， 使 用 上 边 这 些 原则 和 技 
巧 ， 你 应 该 很 容易 就 可 以 实现 页 面 的 剩余 部 分 。 


发 布 你 的 设计 


一 个 良好 的 工作 流程 是 可 以 让 你 的 读者 或 者 用 户 尽快 而 且 方 便 的 看 到 你 的 成 果 。 如 果 仅 仅 在 本 地 开发 ， 设 
计 ， 你 事实 上 很 难 发 现 上 自己 的 问题 ， 从 而 难以 得 到 真正 的 提升 。 而 将 自己 的 产 出 让 别 的 开发 人 员 或 者 设计 
病 看 到 ， 并 得 到 实时 的 反馈 ， 则 可 以 在 很 多 方便 帮助 你 改进 。 我 们 将 使 用 Github 的 主页 服务 来 发 布 自己 的 
作品 ， 当 然 如 果 你 有 亚马逊 的 云 服务 或 者 其 他 云 服 务 提供 商 的 主机 ， 你 也 可 以 很 容易 的 将 作品 发 布 在 其 
中 。 
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Github 的 主页 服务 


Github 提 供 了 Github Pages 的 服务 来 帮助 你 为 自己 的 项 目 提供 主页 。 目 前 ， 这 种 主页 服务 分 为 两 种 : 用 户 
主页 和 项 目 主页 。 其 中 用 户主 页 已 经 称 为 广大 开发 者 的 标 配 ， 有 很 多 的 开发 者 已 经 将 自己 的 博客 迁移 到 了 
Github 上 ， 其 中 所 用 到 的 核心 机 制 就 是 Github Pages 。 


这 篇 文章 主要 介绍 如 何 使 用 项 目 主页 。 项 目 主页 ， 顾 名 思 义 ， 就 是 你 项 目的 主页 ， 本 来 设计 的 初衷 是 为 你 
的 项 目 编写 介绍 文档 ， 不 过 Github 只 提供 对 静态 内 容 的 托管 。 如 果 需 要 添加 评论 ， 可 以 使 用 disqus 的 服 
务 ， 而 和 微 博 ，flickr 等 集成 都 有 现成 的 JavaScript 片 段 ， 这 里 也 不 做 详细 讨论 。 


发 布 你 的 Web 设 计 


Github 提 供 的 项 目 主页 服务 可 以 帮助 你 快速 翌 设 计 发 布 ， 你 所 需要 做 的 就 是 为 项 目 创建 一 个 名 叫 gh- 
pages 的 分 支 ， 然 后 将 HTML/CSS/JS 放 在 这 个 分 支 上 即 可 。 


假设 你 在 github 上 的 用 户 名 为 wumai (我 一 时 间 想 不 到 好 名 字 ， 人 在 写 这 一 页 的 时 候 看 了 看 窗外 ， 筋 蛋 四 合 ， 
不 放 就 假设 用 户 名 为 雾 蛋 吧 )， 那 么 根据 惯例 ， 你 的 Github 地 址 为 https://github.com/wumai 。 这 时 候 ， 
假设 你 的 项 目 (repo) 的 名 称 为 design-1 ， 则 你 的 项 目 主页 地 址 为 https://wumai.github.io/design- 
人 


知道 了 你 的 项 目 主页 地 址 ， 你 就 需要 为 这 个 页 面 添加 内 容 了 : 
$ git clone git@github.com:abruzzi/design-boilerplate.git design-1 


克隆 了 design-boilerplate 之 后 ， 


$ cd design-1 
$ git remote -v 


你 可 以 看 到 当前 的 项 目 是 和 git@github.com:abruzzi/design-boilerplate.git 关联 的 ， 


origin gitàgithub.com:abruzzi/design-boilerplate.git (fetch) 
origin gitàgithub.com:abruzzi/design-boilerplate.git (push) 


你 需要 先 和 这 个 样板 工程 解除 绑 定 : 


$ git remote remove origin 


然后 你 需要 在 Github 上 创建 一 个 新 的 Repo， 假 设 命名 为 design-1 ， 这 时 候 ， 将 这 个 新 创建 的 Repo 作 为 你 
本 地 的 remote : 


$ git remote add -u origin gitQgithub.com:wumai/design-1.git 


与 远程 连接 之 后 ， 我 们 可 以 开始 实际 的 设计 了 ， 不 过 在 这 之 前 ， 需 要 先 创建 一 个 gh-pages DX : 
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$ git checkout -b gh-pages 


这 条 命令 会 创建 gh-pages 分 文 ， 并 切换 到 该 分 文 ， 这 样 后 续 的 修改 都 会 在 该 分 文 进 行 ， 这 也 正 是 我 们 想 
要 的 。 开 发 调试 之 后 ， 就 可 以 将 这 个 分 支 push 到 Github : 


$ git push -u origin gh-pages 


好 了 ， 现 在 打开 地 址 http://wumai.github.io/design-1 ， 应 该 就 可 以 看 到 你 自己 的 设计 了 。 
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AT 一 一 


BE — 


今天 我 们 将 一 起 完成 另外 一 个 设计 ， 


Æ : Twitters' New Face 


Kerem Suer 
Duis aute irure dolor in reprehender- 
itin voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. Excepteur 


& 


Twitter 的 新 界面 。 和 上 一 周 的 设计 一 样 ， 它 来 源 于 dribble.com o 


Kerem Suer 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 


e & 


PHILIPPINES TRENDS 


ZDONTSTOPLYRICVIDEO 
ZMLFTSItsComplicated 
ZTangaLangMoments 
fab5WordsForYou 
£5SOSDONTSTOPLYRICVIDEO 
Happy Chicserifics Day 

Dr. Fluke 

JaDine For TBYD The Movie 


Galawang JaXel 
JulQuen For OBTCHTheMovie 


sint occaecat cupidatat non. 
"^ * 2 eso E. 
95 www.kerem.co 


WHO TO FOLLOW 


e Chris Spooner 
r i Blogge 


Follow e) £3 AxelHerrmann | 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum. 

k 2 ~= e” HaraldurThorleifs... 


James Fletcher 


£g Kerem Suer 


Nathan Powell 


Nick Slater 


ACTIVITIES 
Eddie 
Alexander Tweet 


Eric Tweet 


Eric Tweet & Kerem Suer | 
John Tweet Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 


(P^ * d — T. 





这 个 设计 是 一 个 非常 典型 的 Web2.0 应 用 模式 ， 从 内 容 上 分 析 ， 它 包括 下 面 这 样 一 些 信息 : 


用 户 本 身 的 信息 

用 户 发 布 过 的 一 些 信 息 

用 户 天 注 的 其 他 用 户 发 布 的 信息 
热门 信息 

系统 推荐 的 一 些 其 他 用 户 


OT 4 c [pe p 


这 种 模式 在 很 多 的 设计 中 都 可 以 用 到 ， 我 们 在 实现 的 时 候 ， 顺 便 可 以 关注 一 下 设计 羡 是 如 何 组 织 这 些 信 息 
的 。 


第 一 天 


在 进入 实际 的 开发 之 前 ， 我 们 先 来 学 习 一 些 基 本 的 知识 ， 这 些 知识 会 帮助 我 们 更 好 的 实现 页 面 ， 应 用 样 
Ao 
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HTML5 与 CSS3 


HTML5 是 下 一 代 (新 一 代 ) HTML 的 标准 。 相 较 于 HTML4，HTML5 有 了 很 多 的 修改 ， 引 入 了 一 些 新 的 标 
签 ， 废 弃 了 一 些 旧 的 标签 ， 更 新 了 一 些 标签 的 寡 意 等 。 它 更 关注 HTML 文 档 的 语义 化 ， 使 得 HTML 不 仅仅 可 
以 被 浏览 器 识别 ， 更 可 能 被 爬虫 或 者 其 他 应 用 使 用 等 。 


CSS3 同 样 是 对 CSS2 的 扩展 。 它 引入 了 众多 的 特性 ， 比 如 自 定 义 字 体 集 ， 阴 影 ， 圆 角 ， 动 男 等 等 。 在 引入 
这 些 特性 之 前 ，Web 开 发 者 经 常 需 要 自己 做 一 些 绕 过 工作 ， 比 如 实现 阴影 的 时 候 会 使 用 一 张 育 景 图 片 来 实 
现 ， 而 圆 角 则 需要 为 4 个 角 都 做 一 张 小 图 片 来 拼凑 起 来 。 


HTML5 的 新 标签 
我 们 在 这 一 小 节 主 要 讨论 这 样 几 个 新 的 标签 


NAV 
HEADER 
ASIDE 

. SECTION 
. ARTICLE 
. FOOTER 


PHARWNPe 


从 标签 的 名 称 也 可 以 看 到 HTML5 在 文档 的 语义 化 方面 的 改善 。 这 些 标签 的 引入 ， 使 得 HTML 文 档 更 像 一 个 
文档 。 下 面 我 们 来 分 别 介绍 这 6 种 标签 。 


NAV 标 签 


nav 标签 的 语义 为 : 当前 文档 的 导航 。 nav 作为 一 个 容器 ， 钙 含 了 链接 到 其 他 文档 或 者 当前 文档 的 其 他 部 
分 的 链接 。 上 比如 他 可 以 被 实现 为 当前 站 点 的 菜单 栏 的 容器 : 


«nav» 
«ul» 
<li><a hrefz"/product"»Product«/a»«/li» 
<li><a hrefz'/contact'"»Contact«/a»«/li» 
<li><a hrefz"/detail'"»Detail«/a»«/li» 
</ul> 
</nav> 


另外 一 个 可 能 的 场景 是 ， 在 页 脚 上 ， 通 常会 放置 一 些 子 站 点 的 链接 ， 这 些 链接 也 可 以 放置 在 nav 中 。 比 
如 REA 是 澳洲 房产 搜索 的 一 个 平台 ， 它 旗下 有 一 系列 的 站 点 ， 上 比如 两 业 地 产 ， 投 资 等 ， 除 了 澳洲 之 外 ， 它 
在 意大利 ， 香 洪 等 地 也 有 站 点 。 
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(5 REA Group AO realestate.com.au Q realcommercial.com.au 


| Italy | Luxembourg | New Zealand 


International: France | Germany | Hong Kong 


Partners: news.com.au | Property for sale | Italian property partner 


© REA Group Ltd (REA:ASX) 


HEADER7; X 


header 标签 的 语义 为 : 当前 文档 的 头 信息 或 者 当前 文档 中 section 的 头 信 息 。 比 如 上 周 中 我 们 的 页 面 上 
的 Hero Section 中 的 两 个 标题 : 


<header> 
«hi»Relax, Finding An Agent Just Got Easierc/hi» 
«h2»Receive proposals from best agents for free«/h2» 
«/header» 


或 者 在 section 中 也 可 以 使 用 : 


«section» 
«header» 
«hi»This is my titlec/h1» 
«p»Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi officia min 
«/header» 
«/section» 
«section» 
«header» 
«hi»This is anotherc/hi» 
«p»Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae voluptatem 
«/header» 
«/section» 


B= 


虽然 它 是 header ， 但 是 并 不 一 定 在 物理 上 位 于 文档 的 头 部 ， 它 更 多 的 是 一 个 逻辑 概 





吵 


ASIDE; X 


aside 的 语义 为 : 对 于 那些 与 当前 文档 内 容 相 关 ， 但 又 不 是 主要 内 容 的 内 容 ， 可 以 放置 在 aside P, AF 
我 们 会 将 这 种 内 容 放 置 在 me 中 ， 但 是 应 该 注意 的 是 ， 侧 栏 并 不 和 aside 完全 对 应 。 侧 栏 是 一 个 视觉 设 
ih. m aside 是 一 个 逻辑 概念 。 


aside 可 以 是 相对 于 整个 文档 的 ， 也 可 以 是 相对 于 某 个 seciton/article 的 : 


<article> 
«hi»Dont design, redisign</h1> 


第 2 周 : Twitter 的 新 界面 41 


3 Web Designs in 3 Weeks 


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
«aside» 
«hi»Colour theory«c/hi» 
«dl» 
«dt»«/dt» 
«dt»«/dt» 
</dl> 
«/aside» 
«/article» 


在 article 中 的 aside, 5 article 的 相关 性 更 高 一 些 (相对 于 整个 文档 ) 。 如 果 aside ^^ 
在 article 中 ， 那 么 它 又 应 该 是 当前 页 面 的 次 要 内 容 。 


«body» 
«header» 
«hi»Dont design, redisignc/h1» 
«h2»Lorem ipsum dolor sit amet, consectetur adipisicing elit.c/h2» 
«/header» 
«aside» 
«hi»Web design</h1> 
«dl» 
«dt»«/dt» 
«dt»«/dt» 
«/dl» 
«/aside» 
</body> 
SECTION 标 签 


section 可 以 表示 一 个 文档 ， 或 者 一 组 逻辑 上 相关 的 内 容 。 但 是 它 并 不 是 一 个 通用 的 容器 ， 如 果 仅 仅 是 为 
了 样式 而 需要 引入 一 个 容器 ， 那 么 推荐 使 用 div, m section 更 多 的 是 和 内 容 本 身 相 关 (而 不 是 展现 ) o 


reveal.js 是 一 个 很 好 的 例子 ， 它 是 一 个 用 HTML 编 写 幻 灯 片 的 工具 ， 每 张 幻 灯 片 都 是 相对 独立 的 ， 它 被 包含 
在 一 个 section 中 : 


«section» 
«h2»UI for developers«/h2» 
«pre»«code data-item» 
***elt;iixmkmuk&gt;U s. 
名 称 : ZE, WE: 2# *€10:3.00(75), Jt : 6.00( 元 ) 
名 称 : 可 口 可 乐 ， 数 量 : 4, ŽA: 15 .00( 元 )， 小 计 : 60.00( 元 ) 
挥 泪 赠送 丙 品 : 
名 称 : xS KS: 
总 计 : 60 ,00( 元 ) 
节省 : 3 .00( 元 ) 
</code></pre> 
</section> 
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入 vC qe H v ES oven o2 | ES A P 
/ B EL es in ” MB KS x 3 pages in 3 weeks 


€ > € | | file:///Users/jtqiu/develop/design/3-pages-in-3-weeks/week-1 /slides/in... SE. 


UI FÜR DEVELOPERS 


*xx< 没 钱 赚 商店 > 购物 清单 ***y 
名 称 : SA, KE: 20, Žr: 3.00( 元 )， 小 计 : 6.00( 元 ) 
名 称 : 可 口 可 乐 ， 数 量 : aA, Hfr: 15.00( 元 )， 小 计 : 60.00( 元 ) 


挥 泪 赠送 商品 : 
三 
总 计 : 60.00( 元 ) 
节省 : 3.00( 元 ) 


kkkkkkkkkkkkkkkkkkkkkk 





ARTICLE; ZX 


article 的 语义 为 : 它 表 示 页 面 上 的 一 块 独立 内 容 ， 本 身上 应 该 是 字 包 含 的 〈 一 个 足以 表意 的 实体 ) 。 并 不 
局 限 在 一 篇 文章 这 个 狭义 的 article 上 。 比 如 一 篇 博客 ， 一 条 评论 ， 一 篇 文章 /新 闻 ， 一 条 微 博 等 。 这 个 独 
立 的 内 容 可 以 被 分 发 到 别 多 ， 或 者 彼 作 为 RSS 的 条 目 来 使 用 。 


我 们 今天 要 实现 的 每 一 天 twist 都 可 以 使 一 个 article 。 


e Kerem Suer 2m 

© Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 


«article class="post"> 
«img srcz"images/juntao.png" altz"" class-"'avator'» 
«header» 
«span class-"name"»Juntaoc/span» 
«span class-"account"»0juntaoc/span» 
«span class-"time"»2m«/span-» 
«/header-» 
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«p»Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus veniam quas, d 
«footer» 
«/footer» 

«/article» 


E RN ze] 


FOOTER; € 





footer 与 header 可 以 对 照看 看 ， 它 也 不 仅仅 是 狭义 的 页 脚 ， 还 可 以 被 使 用 在 section 或 
者 article 中 。 在 理解 这 些 元 素 的 时 候 ， 尽 量 放 在 文档 /内 容 的 角度 来 考虑 ， 而 不 是 从 视觉 上 考虑 。 比 
如 footer 并 不 一 定 非 要 放 在 页 面 的 最 底部 。 


<footer> 
«nav» 
«a hrefz"/product"»Product«/a» 
«a hrefz"/contact'»Contact«/a» 
«a hrefz"/detail'»Detail«c/a» 
«/nav» 
«h2»CopyRight92014«/h22 
«/footer» 


CSS3 新 特性 


CSS3 引 入 了 众多 的 新 特性 ， 使 得 Web 设 计 变 得 非常 容易 。 在 此 之 前 ， 人 们 需要 借助 JavaScript 拉 巧 ， 精 心 
设计 的 图 片 等 来 完成 一 些 设 计 上 的 效果 。 目 前 CSS3 的 众多 特性 已 经 为 所 有 的 主流 浏览 器 所 支持 ， 在 你 的 设 
计 中 ， 你 也 可 以 放心 的 使 用 这 些 特性 了 。 当 然 ， 异 常 总 是 存在 的 ， 比 如 奇 姜 的 IE 系列 (事实 上 ， 我 本 人 总 
是 有 意 无 意 的 在 躲避 IE). 


在 介绍 其 他 例子 之 前 ， 我 们 先 定义 一 个 基准 ， 假 设 我 们 有 一 个 很 简单 的 Box : 


«section class-"container"'» 
«section class-"'box'» 
I'm a box 
«/section» 
«/section» 


第 2 周 : Twitter 的 新 界面 44 


3 Web Designs in 3 Weeks 





圆 角 


角 风 格 可 以 让 一 个 带 有 边框 的 元 乘 看 起 来 没有 那么 锋利 ， 事 实 上 芹 果 公司 的 很 多 设计 都 带 有 一 些 圆 角 ， 
HUAn, SET ELSE 


在 CSS3 中 ， 实 现 圆 角 非常 简单 ， 只 需要 定义 一 个 圆 角 的 半径 即 可 : 


.Founded { 
border-radius: 8px 8px 8px 8px; 
j 


这 四 个 数字 分 别 表 示 : 左上 ， 右 上 ， 右 下 ， 左 下 。 当 然 ， 如 果 四 个 角 的 圆 角 半径 一 样 的 话 ， 可 以 简写 为 : 


. rounded ( 
border-radius: 8px; 


} 
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育 景 渐变 


背景 渐变 可 以 以 渐变 的 方式 来 修改 一 个 元 素 的 背景 色 ， 从 而 展现 出 立体 的 效果 。 背 景 渐变 可 以 分 为 两 
类 : 线性 渐变 和 径 向 渐变 。 线 性 渐变 需要 指定 一 个 方向 ， 然 后 一 组 颜色 。 


颜色 值 按照 方向 上 的 长 度 补 分配， 比如 下 面 这 个 例子 中 我 们 使 用 了 两 个 颜色 : 


.gradient ( 
background: linear-gradient(to bottom, Zeee, #666); 


j 
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如 果 使 用 三 种 颜色 : 


.gradient ( 
: linear-gradient(to bottom, Zeee, £666, #eee); 


j 





径 向 渐变 默认 的 会 从 圆心 开始 ， 并 逐渐 按照 径 向 来 分 配 选 中 的 一 组 颜色 : 
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.gradient-rounded { 
: radial-gradient(24666, Zeee, #666); 


j 





使 阴 影 


盒 阴 影 可 以 体现 元 素 的 立体 感 ， 在 之 前 ， 要 实现 一 个 阴影 ， 开 发 者 需要 绘制 两 个 不 同 颜色 的 元 素 ， 然 后 得 
加 在 一 起 。CSS3 中 的 使 阴影 可 以 大 大 简化 这 个 过 程 。 


定义 一 个 盒 阴 影 ， 需 要 指定 这 样 一 些 参数 : 阴影 在 x 轴 上 的 偏 移 ， 阴 影 在 y 轴 上 的 偏 移 ， 阴 影 的 模糊 半径 ， 
阴影 的 颜色 。 


.box-shadow ( 
orange; 


j 
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上 例 中 我 们 将 模糊 半径 设置 为 了 6 ， 从 而 得 到 了 一 个 清晰 的 阴影 ， 如 果 将 模糊 半径 设置 为 5px : 





如 果 将 偏 移 设 置 为 负数 ， 则 可 以 得 到 一 个 在 左上 和 角 的 偏 移 : 


.box-shadow { 
orange; 


j 
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金 阴 影 还 有 一 个 参数 ， 可 以 实现 内 阴影 : 


.box-shadow { 
- - orange inset; 


j 





文字 阴影 


和 盒 阴 影 相 似 ， 文 字 阴 影 用 来 为 文字 添加 立体 的 效果 。 
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.text-shadow { 
text-shadow: 2px 2px 1px gray; 
J 





i 3€ (transition) 


过 渡 发 生 在 元 素 在 两 个 状态 中 切换 时 ， 它 会 缓慢 的 的 将 元 素 从 一 个 状态 变 到 另外 一 个 状态 。 


比如 我 们 上 例 中 的 box ， 假 设 其 样式 为 : 


.box (1 
background: white; 
color: orange; 


当 hover 时 ， 其 样 陈 变 成 了 


.box:hover { 
background: orange; 
color: white; 


3x S MA BUR SEA boxi RRE ERGE, JUGAR ER, ifEXCETBORRASGSLUDamA, Rr» 
妃 标 在 一 个 列表 中 通过 时 ， 会 给 人 以 眼花 结 乱 的 感觉 。 过 渡 则 可 以 让 这 个 过 程 变 得 舒缓 : 


.box { 
background: white; 
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color: orange; 
transition: all .5s ease-in-out; 


这 时 候 当 鼠标 进入 box 到 实际 颜色 发 生变 化 需要 0.5 W, M ease-in-out 是 一 个 函数 名 ， 相 应 的 还 
有 ease-in ， ease-out 等 。 他 们 的 区 别 在 时 间 很 短 的 时 候 几乎 觉察 不 到 ， 大 家 可 以 在 这 里 看 到 详细 的 解 
释 。 


变换 事实 上 为 我 们 提供 了 基本 的 动画 能 力 ， 上 比如 我 们 在 很 多 网 站 上 都 见 到 过 这 样 的 效果 : 当 鼠 标 挪 到 一 张 
图 片 的 缩 略 图 上 时 ， 图 片 会 变 大 一 些 ， 挪 开 之 后 又 会 复原 。 当 然 ， 使 用 JavaScript 也 可 以 模拟 这 个 动作 ， 不 
过 CSS3 中 已 经 自 带 了 这 样 的 特性 。 


在 CSS3 中 使 用 变换 非常 简单 ， 比 如 刚才 提 到 的 这 个 效果 : 


.element:hover ( 
transform: scale(1.2); 


j 
H ERGRHTRIEIAJUGREI., MRR AAB 1.2 倍 大 。 另 一 个 常见 的 变换 效果 是 旋转 : 


.element:hover { 
transform: rotate(180deg); 


j 
M ERGRTRIEIAJUGRE], JLSRIRQERS1800R. dXdimIERMEAS —T19 BS d : 


.element:hover ( 
transform: translate(200px, 100px); 


j 


H BRPHRIEIRTUSRS], MRRAA RORA 〈X 轴 方向 200 像 素 ，y 轴 方向 100 像 素 ) 。CSS3 事 实 上 支持 非 
彰 多 的 变换 画 效 ， 这 里 融 不 一 一 列举 了 ， 读 者 可 以 参考 这 个 详细 的 画 效 列表 。 


Marking up 


好 了 ， 我 们 已 经 学 习 了 足够 多 的 理论 知识 了 ， 下 面 融 开始 实际 的 页 面 开 发 吧 ， 相 信 你 已 经 摩 产 探 筝 ， 跃 路 
Sx T IE ? 


我 们 先 来 党 试 编 写 整 个 页 面 的 HTML 结 构 ， 我 们 可 以 使 用 之 前 学 习 的 HTML5 的 新 标签 ， 但 是 也 不 用 彻底 丢 
JEHTMLARBSA A : 


«header» 
«nav» 
«ul» 
<li><a href="#" class-"'"compose"»«/a»«/li» 
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<li><a href="#" class-"alert"»«/a»«/li» 
<li><a href="#" class="email"></a></li> 
<li><a href="#" class="tag"></a></li> 


</ul> 
</nav> 
</header> 
<aside> 


<div class="profile"></div> 
<div class="gallery"></div> 
<div class="activities"></div> 


</aside> 


<section class="content"> 
<nav class="info"> 


<ul> 
<li 
-la 
<li 
ET 
</ul> 
</nav> 


class="number">200</11> 
class="number">120</11> 
class="number">180</11> 
class="number">200</11> 


<div class="articles"> 
<article></article> 
<article></article> 
<article></article> 


«/div» 
«/section» 
«aside» 


«div class-'trends"»«/div» 
«div class-'"to-follow"»«/div» 


«/aside» 
«footer» 


«div class-'copyright"»«/div» 


«/footer» 


我 们 将 页 面 分 为 5 个 主要 的 区 域 : 头 部 ， 左 边栏 ， 内 容 区 ， 右 边栏 ， 页 脚 。 当 然 这 只 是 一 个 初步 的 划分 ， 如 
行 修改 。 


果 我 们 发 现 有 需要 重新 调整 的 地 方 ， 随 时 可 以 回来 进 


第 二 天 


有 了 大 的 划分 之 后 ， 我 们 就 可 以 进行 实际 的 开发 了 。 我 们 先 


部 有 代表 性 ， 很 多 其 他 Web 设 计 都 包含 了 这 桩 的 模式 ， 因 此 


部 分 。 


Tweet& H B 3: 


现 


一 个 Tweet 在 设计 上 是 这 样 的 : 
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择 页 面 上 的 Tweet 条 目 进行 实现 ， 这 部 分 非 


会 这 个 可 以 帮助 我 们 快速 的 实现 页 


页 面 的 其 他 
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£ Kerem Suer 

© Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum. 


对 于 每 一 条 Tweet， 根 据 HTML5 对 article 的 摘 述 ， 我 们 其 实 可 以 很 自然 的 将 Tweet 实 现 为 article, FP 
以 我 们 可 以 这 样 定 义 一 个 Tweet : 


<article class="post"> 


«img src="images/juntao.png" alt="" class="avator"> 
«section class="content"> 
<header> 


<span class="name">Juntao</span> 
«span class="account">@juntao</span> 
<span class="time">2m</span> 
</header> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus veniam qua 
<footer> 
<nav> 
<a href=""><i class="icon-redo"></i></a> 
«a href=""><i class="icon-star"></i></a> 
<a href=""><i class="icon-loop"></i></a> 
<a href=""><i class="icon-ellipsis"></i></a> 
<a href=""><i class="icon-maximize"></i></a> 
</nav> 
</footer> 
</section> 
</article> 


BS 


每 个 Tweet 中 ， 首 先 需 要 一 张 作 者 的 头像 ， 然 后 是 用 户 昵 称 ， 用 户 名 ， 时 间 ， 正 文 ， 在 正文 下 面 有 一 些 
link， 包 括 转 发 ， 先 等。 这 种 布局 方式 非常 常见 ， 你 可 以 仔细 看 一 下 上 一 周 的 设计 ， 同 样 会 发 现 这 种 模式 : 
左边 是 一 个 独立 的 图 片 ， 右 边 是 另外 一 大 块 的 信息 ， 和 右边 的 信息 都 严格 的 左 对 齐 。 





通常 要 实现 这 种 布局 ， 我 们 需要 先 为 左右 两 部 分 设置 一 个 相同 的 父 元 素 ， 上 比如 此 处 的 post 。 然 后 将 父 元 素 
的 position 设置 为 relative ， 将 左边 的 元 素 的 position 设置 为 absolute , Meroe iiia 
对 于 父 元 素 绝 对 定位 了 了。 最后， 为 右边 的 元 素 设置 一 个 margin-left ， 空 出 一 定 的 距离 给 左边 的 元 素 。 


在 未 应 用 样式 之 前 : 
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My Design b! 
€ Jl | localhost:8888/index.html 


ain() í 


Juntao € juntao 2m 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus veniam quas, deserunt! Provident sit, 
impedit, facilis molestias minus quas hic ad deserunt quia, alias velit architecto debitis itaque doloremque 
quaerat. 


^" ao A 
K^ É 


我 们 先 来 为 头像 加 上 样式 ， 首 先 需要 限定 头像 的 大 小 (30x30) , Am Rborder-raduis;&i& 7; 10096, ix 
可 以 得 到 一 个 完美 的 圆 。 最 后 ， 将 其 对 于 父 元 素 的 偏 移 设置 好 : 


.avator ( 
width: 3em; 
height: 3em; 
Qinclude border-radius(10096); 
position: absolute; 
top: 2em, 
left: 2em; 
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My Design b 


€ ei | | localhost:8888/index.html 











然后 我 们 需要 将 用 户 昵称 ， 用 户 名 等 浮动 起 来 ， 并 且 将 医 部 的 那些 可 以 点 击 的 链接 也 浮动 起 来 : 


.post { 
position: relative; 
text-align: left; 
padding: 2em; 
background: $post-bg-color; 
border-bottom: 1px solid $body-color; 


.Content ( 
margin-left: 4em; 


span ( 
margin-right: 1em; 


&.name ( 
font-weight: bold; 


&.account ( 
font-weight: lighter; 
color: $gray-text-color; 


&.time ( 
color: bgraystext-colom 
float: right; 
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margin-right: 0; 


j 
j 
j 
header ( 
margin-bottom: 1em; 
} 
section { 
margin-bottom: 1em; 
pi 
line-height: 1.4; 
font-weight: normal; 
j 
img 1 
width: 10096; 
margin-bottom: 1em; 
j 
j 
footer ( 
at 
text-decoration: none; 
color: $gray-text-color; 
margin-right: 1em; 
&:last-child { 
float: right; 
margin-right: 0; 
j 
&:hover { 
color: $text-color; 
j 
j 
j 


3x E mj, n] ELS 8 — 3E SÉ zik; R Tweet 了 : 
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My Design 


€ | ] localhost:8888/index.html DE 








E Juntao 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus veniam quas, deserunt! Provident sit, impedit, 
facilis molestias minus quas hic ad deserunt quia, alias velit architecto debitis itaque doloremque quaerat. 





CSS3 颜 色 
在 CSS2 中 ， 颜 色 可 以 通过 三 种 方式 来 表示 


1， 预 定义 颜色 名 ， 如 red ， orange 
2， 十 六 进 制 ， 如 #004c97 
3，RGB 表 示 法 ， 如 rgb(255, 122, 0) 


颜色 值 有 红 ， 绿 ， 蓝 混合 表示 ， 每 种 颜色 的 取 值 都 在 区 间 0-255 内 ， 上 比如 #664c97 表示 ， 红 色 值 
为 0(0x00) ， 绿 色 值 为 76(9x4c) ， 蓝 色 值 为 151(0x97)。 


在 CSS3 中 又 引入 了 三 种 新 的 颜色 表示 法 ， 分 别 为 rgba，hsl 和 hsla。rgba 为 rgb 添加 了 alpha 通 道 ， 即 透明 通 
3B. 


比如 : 


background-color: rgba(200, 120, 80, 0.2); 


最 后 一 个 数字 的 取 值 范围 在 区 间 0-1 之 间 ， 如 果 该 值 为 0， 则 表示 完全 透明 ， 值 为 1 则 未 示 完 全 不 透明 。 


CSS3 引 入 的 HSL 色 彩 空 间 是 一 个 非常 有 意思 的 表示 法 。 我 们 通常 描述 颜色 的 时 候 ， 不 会 直接 转换 成 RGB 的 
值 ， 更 多 的 时 候 我 们 会 说 : 我 想 要 这 个 按钮 是 亮 一 点 的 蓝 色 ， 或 者 当 我 们 看 到 一 种 不 太 红 的 红色 ， 我 们 直 
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岗 的 想法 是 让 它 更 偏 同 红色 一 些 。 但 是 这 些 拉 述 无 法 通过 RGB 未 示 法 表达 出 来 ， 而 HSL 则 可 以 做 到 这 
rH 


JNO 


HSL 分 别 表 示 Hue (色相 ) , Saturation (EME) , Lightness (2E) 。 色 相 就 是 我 们 常 说 的 红色 ， 蓝 色 
等 ; 饱和 度 是 指 ， 在 色相 中 参 和 人 的 白色 的 程度 ， 饱 和 度 越 高 ， 色 彩 就 越 锐 利 ， 越 接近 色彩 本 身 的 值 ; 亮度 
是 在 色相 中 人 参 入 黑色 的 程度 ， 完 度 越 高 越 完 ， 越 低 越 瞳 。 我 们 可 以 通过 两 张 图 来 描述 清楚 HSL 色 彩 空间 : 


从 上 图 可 以 看 出 HSL 色 彩 的 分 布 情况 。 使 用 HSL 来 表示 颜色 需要 三 个 参数 : 


background-color: hsl(30, 100%, 5096); 


上 面 的 颜色 定义 指 : 色相 为 30， 饱 和 度 为 100%， 完 度 为 50% 的 颜色 ， 色 相 在 色 盘 上 的 位 置 如 下 图 所 示 : 


rwg} es P p, 
Ye Ow -Greae 2 


anges 


i ee o, po enm Re jā 





—Á———— hsl(200, 80%, 409) ， 比 如 用 户 反 馈 说 这 个 色彩 太 上 蜡 ， 我 们 可 以 很 容易 的 调 
EX 40% 为 45% 或 者 50% ; 或 者 用 户 抱怨 色彩 不 够 深 ， 不 够 蓝 ， 我 们 事实 上 又 可 以 调整 色相 后 者 饱和 度 。 


响应 陈设 计 


随 着 不 同 尺 寸 的 移动 设备 的 出 现 ， 开 发 者 需要 完成 一 种 设计 ， 这 种 设计 可 以 在 不 同 的 设备 上 都 正 弟 工作 。 
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流 式 布局 (完全 按照 百分比 来 定位 ， 去 除 代 码 中 关于 尺寸 的 硬 编码 ) 可 以 在 不 同 的 较 大 的 屏幕 上 很 好 的 工 
作 。 在 移动 设备 上 上， 虽然 流失 布局 也 很 好 的 显示 ， 但 是 由 于 手机 屏幕 本 身 的 限制 ， 一 个 很 小 的 百分比 的 元 
素 并 不 真 的 可 用 。 上 比如 在 打上 显示 器 上 ，20% 是 一 个 足够 大 的 可 视 区 域 ， 但 是 在 手机 上 可 能 就 完全 无 法 识 
别 了 。 


因此 ， 响 应 式 设 计 应 用 而 生 ， 简 而 说 之 ， 响 应 式 设 计 为 每 个 不 同 尺寸 的 设 各 分 别 作 了 设计 。 上 比如 在 扣 面 
上 上， 每 行 可 以 显示 4 张 图 片 ， 而 在 iPad 上 ， 每 行 显示 两 张 ， 在 手机 上 ， 每 行 只 显示 一 张 图 片 。 这 样 可 以 保证 
对 于 不 同 尺寸 的 设 各 都 提供 很 高 的 可 用 性 。 


Media Query 


在 CSS 中 ， 你 可 以 知道 屏幕 的 尺寸 ， 并 且 根 据 尺寸 的 不 同 来 应 用 不 同 的 CSS 文 件 ， 这 个 机 制 就 是 media 
query 。 上 比如 我 们 可 以 在 一 个 link 标签 中 写 这 样 的 代码 : 


«link rel="stylesheet" media="screen and (max-width: 480px)" href="numbers-small.css" /> 
a] i | EE | 


这 个 CSS 会 在 最 大 视 口 (viewport) 为 480px 的 环境 中 生效 。 同 样 ， 我 们 可 以 在 CSS 代 码 中 使 用 这 样 的 表达 
A: 


.information { 
background-color: red; 


j 


Qmedia screen and (min-width: 1024px) { 
.information { 
background-color: yellow; 


j 


所 有 的 响应 式 设 计 都 依赖 于 这 个 机 制 ， 一 旦 我 们 可 以 感知 屏幕 的 尺寸 ， 就 可 以 为 其 应 用 不 同 的 样式 : 将 某 
些 元 素 的 宽度 增 大 ， 隐 藏 菏 些 元 素 等 等 。 接 下 来 我 们 来 看 一 个 实例 ， 并 从 中 学 习 如 何在 我 们 的 页 面 中 使 用 
响应 式 设计 。 


一 个 实例 


比如 Twitter new face 中 ， 我 们 可 以 看 到 一 些 数 字 ， 我 们 可 以 将 它 改 造成 响应 式 的 。 


«section class-"numbers"» 
«ul» 

«li class-'"item'» 
«h4»Tweets«c/h4» 
«p»200«/p» 

«/li» 

«li class-'"item'» 
«h4»Photo/Videos«c/h4» 
«p»250«/p» 

</li> 

<li class="item"> 
<h4>Following</h4> 
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«p»55«/p» 
</li> 
<li class="item"> 
<h4>Followers</h4> 
<p>180</p> 
«/li» 
</ul> 
</section> 


我 们 在 昌 面 浏览 器 中 ， 需 要 将 这 4 个 数字 展现 在 同一 行 上 : 


.Numbers { 

width: 60em; 

margin: 2em auto; 

background: $post-bg-color; 

li { 
float: left; 
width: 25%. 
box-sizing: border-box; 
padding: 1.5em 3em; 
border-bottom: 3px solid transparent; 
transition: all .3s ease-in; 


h4 ( 
text-transform: uppercase; 
color: $gray-text-color; 


pt 
margin-top: 1em; 
font-weight: bold; 


&:hover { 
border-bottom: 3px solid $twitter-color; 


} 


Qinclude clearfix; 
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My Design 


€ ei | localhost:8888/index.html A 





200 250 55 180 





E Juntao 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus veniam quas, deserunt! Provident sit, impedit, 
facilis molestias minus quas hic ad deserunt quia, alias velit architecto debitis itaque doloremque quaerat. 





Sass 在 3.2 之 后 ， 提 供 了 非常 方便 的 机 制 ， 我 们 可 以 根据 不 同 的 尺寸 来 应 用 不 同 的 样式 。 首 先 定义 一 
个 mixin ， 这 个 mixin 接受 三 个 可 能 的 参数 ， 分 别 表 示 手 机 ， 平 板 和 桌面 浏览 器 。 


Qmixin respond-to($media) ( 
Qif $media == handhelds { 
@media only screen and (max-width: $break-small) { Qcontent; } 


} 
Qelse if $media == medium-screens { 
Qmedia only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1 
j 
Qelse if $media == wide-screens { 
Qmedia only screen and (min-width: $break-large) { Qcontent; } 
j 





而 我 们 需要 先 定义 两 个 break-point : 


$break-small: 320px; 
$break-large: 1024px; 


在 使 用 的 时 候 ， 只 需要 指定 : 
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JR 
float: left; 
width: 25%; 


Qinclude respond-to(medium-screens) { 
width: 5096; 











LU. 
My Design b! 
各 eJ | | localhost:8888/index.html iE O 
200 250 
55 180 
E Juntao 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus veniam quas, deserunt! Provident sit, impedit, 
facilis molestias minus quas hic ad deserunt quia, alias velit architecto debitis itaque doloremque quaerat. 
对 于 手机 屏幕 : 
gum 
float: left; 
width: 2596; 
Qinclude respond-to(handhelds) ( 
float: none; 
width: 10096; 
AT 
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iOS Simulator - iPhone 4s - iPhone 4s / iOS 8.... 
Carrier ^ 8:48 PM mm 


localhost m 


200 


250 


55 


180 


Juntao 





Lorem Ipsum dolor sit amet, consectetur adipisicing 
elit. Doloribus veniam quas, deserunt! Provident sit, 
impedit, facilis molestias minus quas hic ad deserunt 
quia, alias velit architecto debitis itaque doloremque 


"u m B 
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第 3 周 : 设计 你 目 己 的 页 面 


过 了 前 两 周 的 练习 ， 你 已 经 diei BE 力 。 你 应 该 可 以 比较 轻松 的 将 一 个 设计 稿 SI 
译 sitit tuis 但 是 这 ， 我们 希望 做 的 是 自己 从 头 实 现 一 个 自己 的 设计 。 


dU 
ve 天 需要 学 习 一 些 设计 的 原则 ， 设 计 并 不 需要 RRRA, et 需要 长 期 的 锻炼 。 


不 过 ， 已 经 有 很 多 优秀 的 设计 病 总 结 了 一 些 基 本 的 模式 ， 我 们 只 需要 治 着 这 些 模式 进行 自己 的 设计 ， 虽然 
ME 京 四 座 ， 但 是 至 少 不 会 难看 。 


好 的 设计 

我 们 在 讨论 好 的 设计 时 ， 它 应 该 至 少 具有 下 列 的 特性 : 
1. 可 用 

2. 吻 用 

3. 简单 ， IE a, 

4. FN, 


事实 上 ， 最 优秀 的 设计 就 是 让 用 户 感觉 不 到 设计 本 身 的 存在 ， 即 人 机 交互 的 界面 融入 到 了 日 常 的 习惯 中 了 。 
其 实在 很 多 时 候 ， 只 有 某 个 设计 十 分 糟糕 时 用 户 才 能 体会 到 设计 的 存在 : 你 找 表 了 整个 页 面 却 没有 发 现 重 
新 发 送 邮 件 的 按钮 ; 进入 了 一 个 深 的 层次 后 发 现 无 法 回 退 ; 一 个 鼠标 移 在 上 边 不 会 变 成 F 的 链接 等 等 。 


我 们 这 里 来 学 习 几 条 简单 而 容易 使 用 的 原则 : 对齐， 对比， 重复 和 相关 性 。 
对 齐 


对 齐 是 最 容易 做 到 ， 也 最 容易 看 到 效果 的 一 个 原则 。 事 实 上 ， 如 果 观 察 足 够 细致 ， 你 会 发 现 这 个 原则 在 任 
何 一 个 设计 中 都 会 存在 。 


我 们 来 看 一 个 设计 ， 这 是 我 做 的 一 个 天 于 UNIX 哲 学 的 演讲 稿 的 设计 中 的 一 
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UNIX Philosophy 


simple is beautiful... 


Do one thing & do it well 


Single responsibility 


Make them work together 


Easy to combine 


Handle text streams 


Universal communication protocol 





这 个 设计 中 ， 所 有 的 文本 都 革 循 着 一 些 看 不 见 的 线 ， 并 按照 这 些 线 来 对 齐 : 


第 3 周 : 设计 你 自己 的 页 面 66 


3 Web Designs in 3 Weeks 


UNIX Philosophy 


simple is beautiful... 


Do one thing & do it well 


Single responsibilttL 


Make them work together 


Easy to combine 


Handle text streams 
Universal communication protocol 





相 比 于 凌乱 ， 人 们 更 倾向 于 阅读 排列 整齐 的 信息 。 如 果 图 片 ， 文 本 等 的 排列 不 整齐 ， 用 户 需 要 花费 一 些 精 
力 来 在 大 脑 中 对 其 进行 处 理 ， 无 形 中 融 增 大 了 使 用 的 难度 。 当 然 ， 并 非 所 有 情况 都 需要 严格 的 对 齐 ， 当 你 
熟练 掌握 了 设计 的 基本 原则 之 后 ， 惑 可 以 在 适当 的 事后 打破 他 们 ， 上 比如 下 面 这 个 设计 束 没 有 遵循 对 齐 ， 但 
是 却 并 没有 影响 到 用 户 的 体验 : 
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‘Juntao 


Developer/Designer 





xt EE 


对 比 ， 即 将 不 同 的 事物 区 分 开 来 。 上 比如 前 景色 和 背景 色 的 区 分 ， 标 题 和 与 正文 的 区 分 等 等 。 在 使 用 对 上 比 时 ， 
一 定 要 足够 强烈 ， 比 如 使 用 互补 色 来 进行 对 比 ， 完 全 不 同 的 两 种 字体 来 体现 差异 等 。 
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[Improve your 


productivity 


by using the command line... 





在 上 图 中 ， 我 们 可 以 看 到 文字 的 权 红 色 和 背景 的 上 灰色 形成 了 鲜明 的 对 比 。 而 主 标 题 和 副标题 之 间 的 文字 大 
小 ， 颜 色 的 变化 也 可 以 让 读者 体会 到 两 者 的 截然 不 同 ， 最 后 ， 在 副标题 中 ， 我 们 使 用 了 和 斜体 字 来 突出 
了 command line 这 个 关键 字 。 


在 对 比 中 ， 事 实 上 可 以 通过 很 多 不 同 的 方式 来 产生 ， 常 见 的 一 些 手 法 如 下 : 


， 闫 色 的 不 同 

.不 同类 型 的 字体 

， 字 体 的 大 小 

， 字 体 的 权重 ( 粗 体 ， 常 规 ， 细 体 ) 


e WW DP 


亲密 性 


人 们 习惯 上 会 将 距离 较 近 的 事物 轨 为 一 组 ， 或 者 至 少 认 为 它们 具有 相关 性 。 上 比如 我 们 在 google 中 进行 搜 
索 ， 搜 索 结 果 界 面 设 这 样 的 : 
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Á | My Design x ) & design principle - Googl: 


各 eo @ https:;//www.google.com.hk/Znewwindow-1&safe-strict&q-design--pri... 97 I. 





Design elements and principles - Wikipedia, the free ... 
en.wikipedia.org/wiki/Design elements and principles ~ 翻译 此 页 


Visual Design elements and principles describe fundamental ideas about the practice of 


good visual design. As William Lidwell stated in Universal Principles of ... 
Art elements - Principles of design - See also - References 


Principles of Design 
char.txa.cornell.edu/language/principl/principl.htm ~ 翻译 此 页 
The Principles are concepts used to organize or arrange the structural elements of 


design. Again, the way in which these principles are applied affects the ... 


PoF] Principles of Design - The Getty 
https://www.getty.edu/education/.../principles design.pdf ~ 翻译 此 页 
2011 J. Paul Getty Trust. Understanding Formal Analysis. Performing Arts in ART. 


Principles of Design. The principles of design describe the ways that artists ... 


Elements and principles of design - John Lovett 
www.johnlovett.com/test.htm ~ 翻译 此 页 
The elements and principles of design are the building blocks used to create a work of 


art. The elements of design can be thought of as the things that make up a ... 


6 Princinles of Desian - .I6 desian 








我 们 事实 上 可 以 很 容易 的 通过 文字 之 间 的 空白 大 小 来 确定 哪些 文字 属于 第 一 个 条 目 ， 哪 些 文 字 属 于 第 二 个 
条 目 。 这 融 是 亲密 性 原则 的 一 个 应 用 实例 ， 如 果 我 们 再 来 分 析 一 下 UNIX 哲 学 的 那个 例子 ， 也 可 以 看 出 亲密 


性 原则 的 使 用 : 
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simple is beautiful... 


Do one thing & do it well 


Single responsibilttL 


Make them work together 


Easy to combine 


Handle text streams 
Universal communication protocol 





这 个 原则 非常 重要 ， 我 们 将 会 在 自己 的 设计 中 大 量 使 用 它 。 比 如 一 大 块 信 息 和 另 一 块 之 间 留 白 的 大 小 ， 标 
题 和 文本 之 间 留 日 的 大 小 ， 图 片 和 摘 述 文字 之 间 的 距离 等 等 。 使 用 亲密 性 原则 ， 可 以 让 节省 读者 很 多 的 时 
间 ， 从 而 让 我 们 的 设计 更 加 有 意义 。 想 象 这 样 一 个 场景 : 你 正在 通过 手机 浏览 一 个 很 长 的 列表 ， 列 表 中 的 
每 一 项 都 包含 了 一 个 图 片 和 对 应 的 描述 文字 ， 而 你 现在 浏览 到 了 第 7 个 ， 但 是 由 于 所 有 的 间距 都 一 样 ， 你 融 
无 法 知道 现在 看 到 的 拉 述 文字 是 对 上 一 张 图 片 的 搞 述 ， 还 是 下 一 张 。 


重复 


重复 ， 即 将 一 种 模式 不 断 使 用 。 在 设计 中 ， 有 很 多 使 用 重复 的 地 方 ， 比 如 一 个 站 点 的 高 完 色 ， 按 钮 /链接 的 
样式 。 在 同一 个 页 面 中 有 很 多 的 重复 ， 而 在 一 个 站 点 中 ， 页 面 之 间 同 样 可 以 保持 重复 。 


在 亲密 性 原则 中 ， 我 们 看 到 的 这 张 图 
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Single responsibilttL 
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Easy to combine 


Handle text streams 
Universal communication protocol 





事实 上 也 有 包含 了 重复 原则 ， 比 如 分 别 列 出 的 3 个 UNIX 哲 学 ， 每 个 条 目 都 包含 了 一 个 大 的 数 子 ， 然 后 一 个 
主 标题 和 一 个 副标题 ， 而 且 主 标题 和 副标题 的 字体 还 不 一 样 。 这 种 重复 会 形成 一 种 节奏 ， 当 读者 /用 户 使 用 
这 个 设计 时 ， 在 任何 时 候 都 不 会 觉得 意外 。 即 使 这 个 设计 是 他 第 一 次 接触 ， 当 学 会 或 者 理解 了 第 一 个 模式 
之 后 ， 后 续 出 现 的 无 非 是 第 一 个 模式 的 重复 。 


比如 这 个 设计 中 的 另 一 个 页 面 
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[Improve your 


productivity 


by using the command line... 





你 可 以 直接 的 感受 到 他 们 来 目 于 同一 个 设计 。 现 在 我 们 来 做 一 个 小 小 的 修改 ， 料 主 标题 和 副标题 的 颜色 做 
一 下 对 调 : 


第 3 周 : 设计 你 自己 的 页 面 73 


3 Web Designs in 3 Weeks 


Improve your 


productivity 


by using the command line... 





这 就 破坏 了 这 种 重复 性 ， 用 户 需 要 花费 一 点 时 间 来 适应 这 种 调整 ， 从 而 意识 到 我 们 的 设计 。 注 意 ， 我 们 的 
目标 是 让 用 户 感觉 不 到 设计 本 上身 的 存在 。 


如 何 组 织 内 容 
层次 


同样 的 内 容 ， 通 过 不 同 的 方式 传递 出 来 的 信息 可 以 是 天 差 地 别 的 ， 我 们 这 里 有 一 个 非 弟 简单 的 例子 : 


假设 我 们 为 《3 周 3 页 面 》 做 了 一 张 课表 ， 课 表 的 内 容 如 下 : 


section "schedule" 
ul 
li 
div "item" 
h32Week 1: Find an agent«/h3 
time 1"2014/10/03"»52014-10-03«/time 
p»Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquam 
div 
li 
li 
div "item" 


h3>Week 2: Twitter new face</h3 
time>2014-10-10</time 
p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ab h 
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</div> 
e e 
<li> 
<div class="item"> 
<h3>Week 3: My portfilio</h3> 
<time>2014-10-17</time> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi debiti 


</div> 
«/li» 
</ul> 
</section> 





如 果 使 用 浏览 器 默认 的 样式 ， 上 面 的 课表 看 起 来 是 这 样子 的 : 


| My Design TA 





€ 6 | | localhost:9999/index.html SE. 











Week 1: Find an agent Week 2: Twitter new face Week 3: M portfilio 

2014-10-03 2014-10-10 2014-10-1 

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Cum aliquam dicta culpa, modi adipisicing elit. Debitis ab hic cupiditate tenetur adipisicing elit. Sequi debitis suscipit et minus 
recusandae, ea cumque. Ut eaque eos, quidem eos, sapiente, nihil earum voluptatem aliquam aliquid consequuntur alias pariatur, cum 
molestiae aperiam earum, odio maiores veritatis, minus aspernatur perferendis! Vitae adipisci unde molestias, nemo voluptate maiores autem eos a 
ab nostrum eum velit. quia aliquam nostrum, iure perferendis! dicta totam quod quaerat recusandae. 





可 以 看 到 ， 课 程 名 称 ， 时 间 ， 课 程 挡 述 的 信息 混合 在 了 一 起 ， 读 者 需要 花费 一 些 精 力 (虽然 可 能 仅 需 要 数 
秒 时 间 ) 才能 找 出 目 己 关系 的 信息 。 


但 是 如 果 将 不 同 权 重 的 信息 用 不 同 的 方式 变现 ， 则 结果 会 大 不 相同 : 


B My Design 





€ eii | ) localhost:9999/index.html 





Week 1: Find an agent Week 2: Twitter new face Week 3: My portfilio 

2014-10-03 2014-10-10 2014-10-17 

Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing 

elit. Cum aliquam dicta culpa, modi recusandae, ea elit. Debitis ab hic cupiditate tenetur eos, sapiente, elit. Sequi debitis suscipit et minus aliquid 

cumque. Ut eaque eos, quidem molestiae aperiam nihil earum voluptatem aliquam minus aspernatur consequuntur alias pariatur, cum molestias, nemo 

earum, odio maiores veritatis, ab nostrum eum velit. perferendis! Vitae adipisci unde quia aliquam voluptate maiores autem eos a dicta totam quod 
nostrum, iure perferendis! quaerat recusandae. 





RU 
x. 
Y 


改 之 后 的 图 显得 更 加 易 懂 ， 读 者 不 需要 花费 任何 的 思考 束 可 以 获得 足够 的 信息 。 
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颜色 在 很 多 时 候 都 会 影响 使 用 者 的 情绪 ， 比 如 红色 代表 热情 (太阳 ， 花 条 等 ) ， 蓝 色 表 示 安 静 平 和 (X 

天 ， 大 海 的 颜色 ) 。 因 此 在 颜色 的 选取 上 也 是 需要 仔细 人 分析， 仔细 研究 的 。 比 如 如 果 你 为 一 家 餐厅 设计 站 
点 ， 那 么 红色 可 能 是 一 个 好 的 选择 ， 但 是 如 果 你 为 一 家 航空 公司 或 者 安全 相关 的 公司 设计 ， 则 需要 考虑 蓝 
色 或 者 绿色 。 


初学 者 的 一 个 误区 是 使 用 多 种 颜色 来 组 成 自己 的 色彩 方案 。 事 实 上 ， Marketo 公司 做 过 一 次 各 个 行业 的 公 
司 在 品牌 颜色 选择 上 的 调查 ， 结 果 非 常 有 意思 : 有 95% 的 公司 仅仅 使 用 了 2 种 以 内 的 颜色 。 而 使 用 的 最 多 的 
4 中 颜色 依次 为 : KE, 1E, RERE, 6EB., 


在 你 目 己 进行 设计 时 ， 如 果 不 太 确定 到 压 要 使 用 那 种 颜色 的 时 候 ， 不 妨 党 试 蓝 色 。 在 选 定 主 色 调 之 后 ， 残 
需要 确定 文字 颜色 和 背景 颜色 了 。 事 实 上 ， 文 字 颜 色 和 背景 闫 色 的 选取 和 主 色调 可 以 完全 无 关 。 了 唯一 的 一 
条 原则 就 是 保证 易 读 性 。 


比如 : 浅 灰 色 的 育 景 和 深 灰 色 的 文字 融 是 一 个 合理 的 挫 配 : 


GRAY TEXT ON GRAY BACKGROUND 


或 者 反 过 来 的 搭配 也 可 以 : 


GRAY TEXT ON GRAY BACKGROUND 





这 两 个 例子 中 ， 文 字 和 背景 的 对 比 都 足够 强烈 ， 从 而 有 较 高 的 可 读 性 。 
选取 合理 的 色彩 方 宁 


要 从 众多 的 颜色 中 挑选 出 色彩 方案 从 来 都 不 是 一 件 容易 的 事 儿 。 但 是 有 一 些 工 具 可 以 帮助 我 们 自动 完成 挑 
选 的 动作 ， 我 们 可 以 使 用 Adobe Kuler 来 根据 照片 选取 颜色 。 


首先 你 需要 找到 一 张 与 主题 色彩 相近 的 图 片 〈 不 一 定 要 跟 主 题 内 容 相 关 ， 这 里 只 关注 颜色 ) 
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然后 将 这 样 图 片上 传 至 Adobe Kuler 即 可 : 
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e AA Image | Color schemes 


e D https://color.adobe.com/create/image/ 


€; Adobe Color CC Create 


二 | Adobe Kuler is now Adobe Color CC. 


Save 2014-08-21 12 


Color Mood BAA Mg e 
/ 


© Colorful 





你 可 以 根据 Kuler 的 一 些 选项 来 获得 不 同 的 颜色 值 ， 从 而 更 加 容易 的 找 出 一 组 合理 的 颜色 方案 。 


ER 


EijrmxRIExBUE, BDAARBESAGPSEBJ—8SO. ALTES TAERImBHBER. AAEE A 
都 需要 有 一 个 原因 而 存在 。 在 页 面 中 引 和 图片 时 ， 需 要 考虑 这 样 一 些 因素 : 


1. 使 用 大 而 且 清晰 的 图 片 

2， 使 用 与 内 容 相关 的 图 片 

3， 图 片 的 质量 ， 尺 寸 ， 了 曝光 等 都 非 弟 重要 
4. 考虑 如 何 与 文字 混 排 


Hero Image 


Hero Image 是 指 一 个 站 点 上 黄金 位 置 的 那 张 巨大 的 图 片 ， 这 张 图 片 通常 都 有 很 高 的 质量 ， 而 且 和 站 点 本 身 
有 很 强 的 相关 性 。 比 如 一 些 设 计 类 的 网 站 上 ， 通 常会 有 很 整洁 的 果子 ， 上 边 整 齐 的 摆 放 了 一 些 工具 。 
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à 


一 个 开发 工具 网 站 ， 或 者 某 个 程序 员 的 博客 上 ， 可 以 使 用 这 样 的 Hero Image 





应 该 注意 的 是 ，Hero Image 除 了 大 而 且 清 蜥 以外， 需要 保持 与 内 容 高 度 一 致 。 一 个 精美 但 是 与 主题 无 天 的 
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Hero Image 反 而 会 分 散 用 户 的 注意 力 ， 产 生 负 面 的 影响 。 


文 混 排 


通 弟 我 们 会 料 图 片 和 文字 混合 在 一 起 ， 两 者 互 为 补充 ， 相 得 益 彰 。 在 图 文 混 排 的 时 人 息 ， 同 样 有 一 些 原则 需 
要 注意 ， 上 比如 文字 的 颜色 和 图 片 本 映 的 颜色 过 于 接近 ， 会 造成 阅读 的 困难 等 。 


LOGO Agent Login SignUp | 


HIMEN WEES -— 


NEGEIVE proposals from best agents for free 


e : 


20,000 1,725,000 17,414 





上 图 中 的 夕阳 光线 太 强 ， 而 文本 的 颜色 又 是 白色 ， 两 者 混合 之 后 就 看 不 清 了 。 
文字 位 置 


文字 的 位 置 也 非常 重要 ， 如 果 强 行 的 将 文字 放置 在 图 片 中 的 主体 之 上 ， 会 产生 一 些 负 面 的 效果 。 我 们 来 看 
一 组 对 比 5 
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ar pf ill extends. 
the in we fear 


eem . 





Emm, FEREARE (AR) 之 上 ， 一 方面 会 造成 阅读 的 不 便 ， 另 一 方面 又 会 阻止 读者 欣赏 
含 著 草本 号 。 如 果 将 文字 放置 在 失 焦 的 位 置 ， 则 两 者 都 得 到 了 足够 的 体现 : 


The fear of 
the ill 





文字 大 小 
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在 进化 过 程 中 ， 人 类 的 眼睛 对 大 的 东西 更 加 敏感 (一 关 狗 能 相对 于 一 只 田 蜂 ， 或 者 一 只 蜜蜂 的 威胁 更 大 ， 
因此 也 更 加 容易 被 眼睛 关注 到 ) 。 当 映 人 眼帘 的 物体 细小 到 一 定 程度 时 ， 它 融 很 容易 航 过 滤 抒 。 


我 们 同样 看 两 张 用 作对 比 的 图 片 : 





上 图 中 ， 由 于 文字 本 身 和 背景 图 中 的 树叶 大 小 相当 ， 因 此 很 容易 被 读者 忽视 。 而 如 果 将 文字 放 到 到 一 定 尺 
寸 ， 超 过 了 背景 图 中 的 最 大 主体 之 后 ， 它 束 会 非常 醒目 : 
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而 且 文 字 和 图 片 的 对 比 还 附 有 立体 层次 : 小 的 文字 离 读 者 较 远 ， 而 大 的 文字 离 读 者 较 近 。 


图 片 完 度 


通常 情况 下 ， 人 们 拍摄 的 图 片 都 是 曝光 过 度 ， 也 就 是 说 ， 白 色 太 多 。 这 在 图 文 混 排 时 ， 会 给 我 们 带 来 一 定 
的 麻烦 。 一 个 简单 的 处 理 方法 是 给 图 片 蒙 上 一 层 灰 色 的 层 ， 然 后 在 层 之 上 编辑 文字 。 
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r 


没有 灰色 图 层 之 前 ， 很 难 在 图 片上 加 入 文 





uU 





有 了 灰色 图 层 之 后 ， 我 们 就 可 以 加 入 亮色 的 文字 了 。 


第 二 天 
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好 了 ， 我 们 已 经 学 习 了 足够 多 的 关于 设计 的 理论 了 ， 让 我 们 开始 实际 的 开发 吧 。 我 们 第 三 周 的 作业 并 没有 
任何 的 参考 ， 需 要 我 们 自己 从 头 开始 设计 ， 从 主题 的 选择 ，Hero Image 的 使 用 ， 到 图 片 的 调整 ， 颜 色 的 搭 
配 等 ， 全 部 都 由 我 们 自己 决定 。 


主题 的 选择 


我 在 ThoughtWorks 组 织 《3 周 3 页 面 》 这 个 Workshop 的 时 候 ， 参 与 者 被 要 求 设想 一 个 自己 最 感 兴 趣 ， 最 愿 
意 投 入 热情 的 主题 ， 然 后 将 这 个 主题 转换 为 一 个 设计 。 如 果实 在 想 不 出 来 ， 他 们 可 以 自己 做 一 个 漂亮 的 简 
历 。 


而 我 作为 组 织 者 ， 则 希望 做 一 个 设计 ， 将 这 个 活动 告诉 给 那些 没有 参加 的 其 他 同事 。 因 此 ， 我 们 这 里 的 主 
题 的 选择 比较 容易 ， 就 叫 《3 周 3 页 面 》。 有 了 主题 之 后 ， 束 可 以 考虑 我 们 希望 把 什么 样 的 信息 传递 给 读者 


在 这 个 设计 中 ， 我 们 需要 传递 给 用 户 的 是 : 


1，Workshop 的 主要 内 容 

2. 提炼 出 这 个 Workshop 一 些 独一无二 的 特点 

3， 参 与 者 如 何 学 习 

4. 一 些 活动 的 照片 

5， 参 与 者 的 作品 集 

6. 必要 的 联系 方式 ， 如 果 读 者 对 这 个 活动 有 兴趣 ， 可 以 联系 我 们 


应 该 注意 的 是 ， 内 容 是 一 个 站 点 与 另外 一 个 站 操 最 不 同 的 地 方 ， 设 计 本 和 映 是 可 以 个 复制 的 ， 但 是 内 容 不 能 
(ABRENE, ERRANTE, EFTAL) o 


色彩 选择 


我 喜欢 简单 的 设计 ， 因 此 主 色 调 只 需要 一 个 。 而 根据 主 色调 可 以 衍生 出 来 一 些 同 一 个 色 系 的 好 几 个 颜色 。 
而 文本 内 容 和 月 景 ， 则 使 用 最 经 典 的 浅 灰 色 育 景 ， 深 灰色 文字 的 挫 配 。 


一 个 直观 的 用 户 界 面 指导 是 这 样 的 : 


第 3 周 : 设计 你 目 己 的 页 面 85 


3 Web Designs in 3 Weeks 


Typography 
H1 - Main title 


H2 - Subtitle, sometimes in bold 
H3 - Content headline 


Body Text 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint oc- 
caecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint oc- 
caecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


Buttons 


Normal Hover Active 


Primary button Primary button Primary button 


Avatars 





Colors 


Primary color Highlight text Background Typograhpy Headingline 
RGB: #0ac285 RGB: #ffffff RGB: #eeeeee RGB: #6e6e6e RGB: #3e3e3e 
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这 样 一 个 指导 中 ， 可 以 看 出 如 何 使 用 Heading ， 搜 钮 的 颜色 ， 鼠 标 移 过 按钮 时 候 的 颜色 等 。 通 音 设 计 病 应 
该 提供 这 样 一 个 UIKit 供 开 发 者 参考 (在 我 们 的 场景 中 ， 我 们 既是 设计 病 ， 又 是 开发 者 ) 。 


实现 


选择 Hero Image 


Hero Image 的 选择 上 ， 我 们 希望 找 一 张 能 体现 团队 合作 ， 又 能 体现 出 活动 相关 内 容 (代码 片段 ， 编 辑 器 
Æ) 。 我 在 大 家 写 代 码 的 时 候 ， 拍 摄 了 一 些 照片 ， 其 中 这 样 我 觉得 和 主题 非常 匹配 : 





导航 栏 
我 们 的 设计 是 一 个 单 页 面 设 计 ， 并 不 需要 复杂 的 交互 ， 在 导航 上 ， 只 需要 让 用 户 可 以 找到 相关 信息 即 可 。 
我 们 这 里 仅仅 需要 两 个 链接 : 


<header> 
S4 V8 ip. 
<li><a hrefz'https://github.com/abruzzi/3-pages-in-3-weeks"'»Code«c/a»«/li» 
<li><a href-z'http://icodeit.org/about-me/"»About«/a»«/li» 
«/ul» 
«/header» 


第 一 个 可 以 导航 到 实际 的 代码 〈 开 发 者 可 以 参考 我 们 的 实现 ) ， 另 一 个 是 关于 作者 的 信息 页 面 
Headline 


在 Hero Image 之 上 ， 我 们 需要 一 个 Headline ， 它 需要 足够 简练 。 另外 还 需要 对 Headline 的 描述 信息 ， 
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对 应 的 HTML 是 这 样 的 : 


<section class="hero"> 

<h2>3 pages in 3 weeks</h2> 

«p»We learn various of tools which are effictive, powerful, agile to build Web pages 
«/section» 


= 





È 3 Pages in 3 Weeks 、 


& € | localhost:9999/index.html 





e Code 
e About 


3 pages in 3 weeks 


We learn various of tools which are effictive, powerful, agile to build Web pages from scracth, and learn by 
practicing. After 3 weeks, attenders should be able to implement most of the Web design in HTML5/CSS3 
easily. 





E R3RdAd 3x T PCI EGEIX, BREL- ERE : 


$background-color: £eeeeee; 
$text-color: #3e3e3e; 
$light-text-color: £Zeeeeee; 
$heading-color: hsl(160, 90%, 40%); 


$mask-color: 4333333; 


然后 ， 在 Body 上 定义 一 些 通用 的 样式 : 


body (1 
font-size: 62.596; 
font-family: 'Open Sans', sans-serif; 
text-align: center; 
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color: $text color; 
background-color: $background-color; 
width: 100%; 


紧 接 着 是 导航 header 和 hero PX : 


header ( 
padding: © 1em; 
background-color: $heading-color; 


li 4 
float: left; 
a 1 
font-size: 1.5em; 
text-decoration: none; 
color: white; 
display: inline-block; 
padding: iem 1em; 
j 
&:hover ( 
background-color: hsl(160, 9096, 3596); 
j 
j 
Qinclude clearfix; 
J 
.hero { 


width: 100%; 

min-height: 50em; 

position: relative; 
background-color: $mask-color; 
z-index: 1; 


&:after { 
background: url('../images/hero-1-resized.jpg'); 
background-size: cover; 
position: absolute; 
content: "" 
z-index: -1; 
opacity: .2; 
width: 100%; 
height: 100%; 


top: 0; 
left: 0; 

j 

h2 ( 
font-size: 6em; 
font-weight: bold; 
padding: 3em © 1em 0; 
text-transform: uppercase; 
color: white; 

j 

pi 


max-width: 70%; 
font-size: 1.5em; 
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font-weight: lighter; 
color: £Zcecece; 
line-height: 1.4; 
margin: O auto; 
padding: iem 0 8em 0; 
span ( 

color: $heading-color; 


此 处 应 该 注意 的 是 对 于 .hero xi lsection, dX4 EE eGEIEBN,, PRÉ position 设置 

为 relative 。 然 后 为 其 添加 了 一 个 伪 元 素 ， 这 个 伪 元 素 上 包含 了 实际 的 图 片 ， 并 为 图 片 设置 了 透明 

a 2. XURESEBESRIEÉBBIGRIR .hero 的 透明 度 的 话 ， 其 子 元 素 h 和 p 都 会 被 这 个 透明 度 影 响 。 
过 引入 一 个 伪 元 素 ， 我 们 就 可 以 分 别 为 文字 和 图 片 设置 不 同 的 透明 度 了 。 


国 3 Pages in 3 Weeks 


e i | localhost:9999/index.html 


Code About 


3 PAGES IN 3 WEEKS 


We-learn' various of tools which are effictive, CM 
pages from scracth, and learn by practicing. After 3 weeks, attenders 
should be able to implen "m Xx. 

easily. 





特性 区 域 


还 记得 在 第 一 周 的 练习 中 ， Find an agent 中 的 1,2,3 3 个 步骤 伟人 印象 深刻 ， 我 们 可 以 参考 这 个 设计 ， 
将 我 们 课程 的 亮点 也 用 同 桩 的 形式 展现 出 来 : 


<section class="topics container"> 
<h3>what do we learn?</h3> 
«ul» 
Eq 
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«div class-"subject"» 
«i class-"icon-wrench"»«/i» 


<h4>Tools</h4> 
<p>We introduce tools like Sublime, Emmet, LiveReload, Guard to speed up 
«/div» 
«/li» 
«l1» 


«div class-'subject'» 
«i class-z'"icon-books"»«/i» 
«h4»Design theory«/h4» 
«p»Some basic theory of design, color scheme, hierachy, imagery .</p> 
«/div» 
«/li» 
eu > 
«div class-'subject'» 
«i class-"icon-circle-o-notch'»«/i» 


«h4»Workflow«c/h4» 
«p»A much more modern way of development, design, or both. We intend to m 
«/div» 
Aie es 
«/ul» 
«/section» 


- EN 


由 于 我 们 之 前 已 经 实现 过 一 次 了 ， 这 样 的 样式 我 们 可 以 很 快 写 出 来 : 





.topics { 
padding: 2em 0 4em 0; 
h3 { 
Qinclude section-title; 
j 
li { 
float: left; 
width: 33.33%; 
nod 
font-size: 3em; 
j 
h4 { 
font-size: 1.5em; 
padding: iem 0; 
font-weight: bold; 
j 
En 
line-height: 1.4; 
color: Z6e6e6e; 
padding: 0 8em; 
margin-bottom: 4em; 
j 
j 


Qinclude clearfix; 
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section-title 这 个 mixin 的 实现 如 下 : 


Qmixin section-title() ( 
font-size: 2em; 
text-transform: uppercase; 
color: $heading-color; 
padding: 2em 0; 


&:after ( 
Content ru 2i: 
display: block; 
background-color: #cccccc; 
width: 2em; 
height: .2em; 
margin: .4em auto; 


WHAT DO WE LEARN? 


N iiv O 


Tools Design theory Workflow 
We introduce tools like Sublime, Some basic theory of design, color A much more modern way of 
Emmet, LiveReload, Guard to speed up scheme, hierachy, imagery. development, design, or both. We 


the whole process intend to make the whole workflow 
efficient and agile 


样 例 区 域 


在 计划 内 容 的 时 候 我 们 讨论 过 ， 要 将 参加 者 做 的 样 例 页 面 展现 出 来 。 样 例 包 括 一 张 截 图 ， 一 个 标题 和 一 段 
摘 述 文字 ， 这 样 可 以 让 读者 直观 的 看 到 我 们 学 习 的 样板 是 什么 。 


«section class-"sample" id-z'"week-1"» 
«ul» 
«lr 
«div class-"thumb"» 
«img /» 
</div> 
</li> 
<li> 
<div class="description"> 
<h4>Week 1: Find an agent</h4> 
<p>In the very first week, we will learn how to setup the most modern and 
</p> 
<p> 
During the workshop, people learn how to implement the mockup from scrath 
<p> 
Also, we highly recommended people work in pairs, then they can learn fro 
</p> 
</div> 
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</li> 
</ul> 
</section> 


有 == 一 一 





对 于 每 一 个 样 例 ，HTML 片 段 都 是 一 样 的 ， 当 前 是 第 奇数 个 样 例 时 ， 把 图 片 在 左边 ， 描 述 信 息 在 右边 ; 当前 


样 例 是 第 偶数 个 时 则 相反 。 


SAMPLES TO BE IMPLEMENTED 


Relax, Finding An Agent Just Got Easier 
R proposals from best agents fo: f 


Enter a Suburb 


HOW IT WORKS 


Week 2: Themes for wordpress 


In this week, we are looking into HTML5 elements, and 
talked about semantics tags. Later on, we leant new 
features in CSS3, like transition, gradient and transform. 


After that, we discussed some color related topic like RGBa 
and HSL/HSLa. Also leant how to choose your own color by 
just think in the HSL way. 


People from different background are keeping pair and 
learn stuff from each other, more people are joining, we 
are running out of talbe. 


这 部 分 非 前 简单 ， 样 陈 如 下 : 


li 
float: left; 
width: 50%; 


.thumb { 
width: 100%; 
height: 30em; 
overflow: hidden; 
img { 
width: 90%; 
margin: 0 auto; 


.description ( 
h4{ 
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Week 1: Find an agent 


In the very first week, we will learn how to setup the most 
modern and effective envrionment first. We use Sublime + 
Emmet plugin for HTML/CSS code composing, and 
Compass + SCSS for css, then Guard + LiveReload for quick 
feedback and enhancement. 


During the workshop, people learn how to implement the 
mockup from scrath, how to structure the HTML 
document, how to float element, how to use pesudo 
elements, etc. 


Also, we highly recommended people work in pairs, then 
they can learn from each other, and get comfortable when 
blocked by some details. 


e 


WE BUILD THEMES FOR PLATFORMS 
Lal —— , OVE TOOSE 


X 


CALL TO ACTION 


Latest Themes for WordPress 


rue mJ gu 
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text-align: left; 
padding-left: 1.5em; 
font-size: 2em; 
font-weight: bold; 


j 
pi 
font-size: 1.5em; 
font-weight: lighter; 
line-height: 1.4; 
color: 4Z6e6e6e; 
text-align: left; 
padding: ,5em 2em; 
j 
j 
Qinclude clearfix; 
j 
展板 


展板 部 分 会 展示 所 有 参与 者 提交 的 作品 ， 每 个 作品 都 包含 一 个 截图 ， 同 时 会 有 一 些 说 明 信 息 ， 上 比如 作者 的 
名 称 ， 和 角色， 头像 等 。 要 组 织 并 展示 这 些 信息 丈 非 易 事 ， 我 们 可 以 充分 利用 其 它 资源 。 比 如 我 在 浏览 别 的 
设计 病 的 作品 时 发 现 ， 有 一 种 做 法 是 展板 上 仅仅 展示 静 态 的 图 片 ， 而 当 奶 标 移动 到 相关 的 设计 上 时 ， 会 滑 
出 一 个 小 的 面板 ， 上 面包 括 了 图 片 的 说 明 ， 当 和 奶 标 挪 开 之 后 ， 这 个 面板 又 会 消失 。 


About 


SIMPLE IS BEAUTIFUL 


Develop & Design for Web Applications 


3 
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Work About 


SIMPLE IS BEAUTIFUL 


Qiu Juntao Dev 


My Portfolio 





要 实现 这 种 效果 ， 我 们 先 完 成 HTML 的 代码 : 


«ul» 
«]i» 
«a hrefz'http://icodeit.org/portfolio-timeline/" target="_blank" class= mask ></a 
«img srcz"images/qiujuntao-showcase.png" alt-z"" classz'"case'"» 
«article class-"'"information"» 
«section class-z'detail'» 
«img src-"images/qiujuntao-avator.jpg" class-"avator'» 
«div class-'contact'"» 
«span class-"name"»Qiu Juntaoc/span» 
«span class-"role"»Dev«/span-» 
«time class-"date"22014-11-28«/time» 
«p»My Portfolio«c/p» 
«/div» 
«a href="#" classz"like"» 
«div class-"icon-heart"»«/div» 
«/a» 
«/section» 
«/article» 
</ 11> 
</ul> 








IRRE 35a SAMa, MARIAA article ， 这 个 隐藏 的 article 会 在 鼠标 挪 
到 图 片上 时 滑 出 来 ， 并 在 鼠标 挪 走 的 时 候 又 消失 。 


DE 
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float: left; 

width 33.33%; 
box-sizing: border-box; 
position: relative; 


height: 22em; 
overflow: hidden; 


.Case ( 
width: 100%; 


&:hover ( 
.mask 1 
top:0; 


.mask (1 
display: block; 
position: absolute; 
top:-22em; 
left:0; 
height: 100%; 
width: 100%; 
background-color: $text-color; 
opacity: I; 


我 们 设置 每 个 条 目 占 用 总 宽度 的 33.33%， 即 每 行 可 以 放置 3 个 作品 。 然 后 定义 了 mask 的 样式 ， 这 
个 mask 就 是 条 目 上 的 a 链接 ， 为 了 扩大 可 点 击 区 域 ， 我 们 将 整个 图 片 都 变 成 了 可 点 击 区 域 。 这 个 mask 的 
top 开 始 设 置 为 -22em ， 也 就 是 隐藏 起 来 ， 然 后 在 hover 时 将 这 个 值 设置 为 0 即 可 。 


而 对 于 information 这 个 隐藏 的 块 ， 我 们 定义 了 以 下 样式 : 


.information { 
position: absolute; 
background-color: $text-color; 
top:22em; 
left:0; 
width: 100%; 
height: 100%; 
opacity: .9; 
transition: all .4s ease-in-out; 
text-align: left; 
padding: © 1em; 
box-sizing: border-box; 
color: white; 


nS 
font-size: 2em; 
padding: 1em 0; 


.detail i 
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position: relative; 
padding-top: 2em; 
.avator ( 
position: absolute; 
width: 3em; 
height: 3em; 
bottom: 0; 
Qinclude border-radius(10096); 


pi 
padding: .5em 0 0 0; 
font-size: 1.5em; 
j 
-coritact f 
margin-left: 4em; 
.hame { 
font-weight: bold; 
margin-right: .5em; 


.role ( 
color: $light-text-color; 


.like { 
position: absolute; 
font-size:2em; 
bottom: 9; 
rignt: 0; 


color: white; 
background-color: $heading-color; 
border: 1px solid $heading-color; 


padding: .2em; 
Qinclude border-radius(100%); 
transition: all .3s ease-in-out; 


&:hover ( 
color: $heading-color; 
background-color: white; 
border: 1px solid transparent; 
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Z) È] 


相 较 于 静态 内 容 ， 动 态 的 内 容 对 人 眼 更 有 了 吸引 力 。 这 可 能 来 源 于 人 类 在 漫长 的 进化 中 获得 的 能 力 ， 动 态 比 
静态 更 加 危险 ! 事实 上 ， 现 实 世界 中 我 们 已 经 不 自觉 的 在 使 用 这 个 法 则 ， 状 态 栏 闪烁 的 QQ 头像 ， 界 面 上 的 
弹出 窗口 ， 到 处 飘动 的 小 广告 ，GIF 动 图 ，Flash 广 告 等 等 。 





页 面 上 的 动态 元 素 会 非 剃 吸引 读者 的 注意 力 ， 会 使 得 页 面 夺 加 生动 ， 更 清晰 传 俐 的 表达 出 内 容 。 我 们 凋 
说 ， 一 图 胜 千 言 ， 而 一 个 动画 又 可 以 胜 过 了 多 张 图 片 当然， 我 们 需要 把 握 好 度 ， 不 能 让 动画 干扰 用 户 对 
内 容 的 消费 ) 。 


页 面 大 小 
按照 传统 的 方式 ， 在 页 面 上 实现 动画 的 方式 有 多 种 : 


1， 使 用 GIF 图 片 
2， 使 用 JavaScript 来 动态 修改 DOM 的 位 置 ， 加 上 一 个 定时 器 
3. 使 用 Flash 


而 这 些 方 法 都 或 多 或 少 有 些 问 题 ， 比 如 引入 额外 的 文件 会 导致 页 面 尺 寸 变 大 ， 这 样 会 导致 页 面 加 载 变 慢 ， 
从 而 影响 用 户 体 验 。 而 CSS3 的 出 现 大 大 简化 了 动画 的 实现 方式 。 通 过 浏览 器 对 标准 的 文 持 ， 我 们 仅仅 听 过 
CSS 就 可 以 实现 动画 ， 而 不 依赖 于 大 尺寸 的 外 部 文件 。 


基本 上 ，CSS3 通 过 过 渡 (transition) ， 变 形 (transform) 动画 (animation) 等 方式 来 支持 动画 。 我 们 可 
以 分 别 来 看 。 


过 渡 和 变形 
x 


过 渡 是 CSS3 标 准 的 一 部 分 ， 用 来 控制 CSS 属 性 变换 的 速率 。 上 比如 最 常见 的 情况 ， 我 们 通过 :hover 伪 选 择 
器 来 定义 鼠标 移 到 元 素 上 的 状态 ， 我 们 为 :hover 状态 定义 了 一 些 不 同 的 属性 值 (不 同 的 背景 颜色 ， 不 同 的 
字体 大 小 等 等 ) ， 当 鼠标 移动 到 元 素 上 之 后 ， 我 们 会 看 到 属性 值 会 被 迅速 的 修改 。 


<div class-s"carcle »«/div» 
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比如 我 们 为 .circle 定义 了 这 样 的 样式 ， 将 它 绘制 成 一 个 圆 形 : 


Circle 4 
width: 20em; 
height: 20em; 
border: 1px solid #c0c0c0; 
box-shadow: © © 5px £ZcOcOCO; 
border-radius: 50%; 
background-color: yellowgreen; 


然后 当 :hover 发 生 时 ， 将 该 圆 的 背景 改 成 栖 色 : 


.Circle:hover ( 
background-color: orange; 


TEMENAN REEK, Xd) Rz 3EAEGLE RASMA RASNE, AS 3s £d BJ j8 
间隔 来 自动 计算 过 程 中 的 属性 值 。 





1， 开 始 时 间 ( 何 时 开始 动画 ) 
2. 持续 时 间 (动画 持续 时 长 ) 
3. 属性 值 根据 时 间 的 变化 函数 (线性 匀速 ， 非 线性 ) 


其 语法 为 : 


#element { 
transition: <property> <duration> <timing-function> <delay>; 


比如 我 们 的 上 例 中 ， 可 以 定义 这 样 的 过 渡 : 


Cirerer 
width: 20em; 
height: 20em; 
border: 1px solid ZcOcOcO; 
box-shadow: © 0 5px £ZcOcOCO; 
border-radius: 50%; 
background-color: yellowgreen; 
transition: background-color is ease-in-out 0s; 
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这 行 过 渡 定 义 表 示 ， 我 们 要 过 渡 background-color BIE, HFa} A $5, at AKRA AAA, JPN 
间 为 Bow。 


如 果 我 们 这 里 有 多 个 属性 要 写 ， 可 以 简写 为 all: 


transition: all 1s ease-in-out 0s; 


REET, TARREI os 忽略 。 


n} ja] BR E — 过 4 个 参数 来 定义 的 贝 塞 尔 函 数 ， 简 而 言 之 ， 它 定义 了 属性 的 值 如 何 根据 时 间 的 变化 而 变 
化 。 比 如 匀速 Mes 先 快 后 慢 的 减速 变化 ， 先 慢 后 快 的 加 速 变化 等 等 ，CSS3 已 经 预定 义 了 一 些 命名 的 函 
ZW : 


linear 表示 匀速 

ease 逐渐 变 慢 

. ease-in 加 速 运动 

. ease-out 减速 运动 

. ease-in-out 先 加 速 后 减速 


mm 和 wmwN 上 


10 — PRESS pi o P. 


© 
5 


Output Percentage 


—D P, 


Input Percentage 0.5 10 0, 


如 果 你 精通 效 学 的 话 ， 可 以 通过 参 效 来 目 动 以 一 个 贝 塞 尔 函 数 : 
cubic-bezier(x1, y1, x2, y2) 


你 还 可 以 通过 这 个 地 址 Cubic Bezier 进 行 预览 ， 然 后 将 参数 拷贝 到 自己 的 CSS 代 码 中 。 
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这 样 ， 当 用 户 再 将 鼠标 移动 到 圆 上 的 时 候 ， 表 景色 会 由 黄 绿 慢 慢 的 过 渡 到 Se, 


变形 


变形 是 另外 一 个 非常 重要 的 CSS3 特 性 。 变 形 是 指 将 元 素 的 尺寸 ， 位 置 ， 形 状 通过 函数 来 进行 变化 。 目 前 包 
括 旋转 (rotate) ， 扭 曲 (skew) ， 缩 放 (scale) ， 移 动 (translate) 以 及 矩阵 变形 (matrix) 。 





EX Bet FL dii 





旋转 的 语法 为 : 


transform: rotate(«angle»); 
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rotate(10deg) 表示 将 该 元 素 顺 时 针 旋 转 10 度 ， 如 果 度 数 为 负数 ， 则 表示 逆 时 针 旋 转 。 比 如 : 


.square ( 
margin: © 5em; 
width: 20em; 
height: 20em; 
border: 1px solid £ZcOcOcO; 
box-shadow: © © 5px £ZcOcOcO; 
background-color: yellowgreen; 
transform: rotate(10deg); 





TIBHARÉZUSRIZRROx, YAAA- EWART. 24AN ER E AFTALE, EEEE HEH 
的 语法 为 : 


transform: skew(«x-angle», «y-angle»); 


.square ( 
transform: skew(10deg); 


j 
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skew(10deg) 





缩放 将 元 素 变 大 ， 涉 及 到 缩放 的 时 候 ， 有 一 个 缩放 比率 的 问题 ， 即 元 素 在 x，y 方 向 的 缩放 比例 通 贡 需要 一 
致 。 当 然 有 些 情况 下 ， 我 们 需要 元 素菜 个 维度 你 持 不 变 ， 而 仅仅 修改 另 一 个 维度 。 缩 放 的 语法 为 : 


transform: scale(<number>[, <number>]); 


缩放 的 倍数 ， 大 于 1 表示 放大 ， 小 于 1 表示 缩小 。 第 二 个 参数 可 以 忽略 ， 当 忽略 时 ，x 和 y 都 按照 


位 移 可 以 将 元 素 按 照 x，y 方 向 移动 。 当 然 还 可 以 两 个 参数 同时 指定 。 位 移 的 语法 为 : 


transform: translate(«x-value»[, «y-value»]); 


EAD : 


transform: translate(10px, 10px); 


将 元 素 向 X，y 方 向 都 移动 10 个 像素 。 而 且 此 数值 可 能 为 负 ， 负 数 表 示 反 方向 移动 。 
matrix 比较 复杂 ， 这 里 就 不 做 深入 讨论 了 。 有 闪 趣 的 可 以 移 步 此 处 深入 学 习 。 


变形 本 身 无 法 完成 动画 ， 但 是 当 它 和 过 渡 结 合 起 来 之 后 ， 就 具备 了 实现 动画 的 一 切 条件 。 简 而 言 之 : 变形 
定义 了 如 何 改变 元 素 的 形体 ， 而 过 渡 定 义 了 时 间 关 系 。 组 合 起 来 ， 我 们 就 可 以 让 一 个 元 素 ， 在 某 一 段 时 间 
内 ， 由 一 个 形体 慢 慢 的 变 成 另外 一 个 形体 ， 这 就 是 动画 


动因 
其 实 有 了 上 边 的 过 渡 和 变形 ， 我 们 融 可 以 完成 很 多 动画 的 动作 部 分 。 比 如 ， 当 鼠标 :hover 到 一 个 元 素 的 时 


候 ， 我 们 将 这 个 元 素 水 平移 动 300px， 但 是 这 个 过 程 需要 持续 1 秒 : 


.Circle { 
transition: all 1s ease 0s; 


} 


.Circle:hover { 
background-color: orange; 
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transform: translate(300px); 


这 时 候 当 移动 鼠标 到 .circle 上 时 ， 就 会 看 到 这 个 元 素 会 缓慢 的 移动 到 右边 。 
我 们 还 可 以 给 :active 状态 加 一 个 不 同 的 样式 : 
.Circle:active { 


background-color: orangered; 
transform: scale(1.2); 


当 用 户 按 下 鼠标 《点 击 button 的 动作 ) ， 会 看 到 圆 形 会 变 大 一 些 ， 而 且 颜色 会 变 成 橘红 色 ， 当 然 由 于 设置 


了 过 渡 ， 这 个 过 程式 渐变 式 的 。 


— 


日 是 这 个 动画 的 也 有 限制 : 


1， 无 法 控制 动画 播放 的 时 机 
2， 无 法 让 动画 循环 播放 


这 就 需要 我 们 引入 更 高 级 一 些 的 动画 (animation) ， 首 先 我 们 来 看 看 关键 帧 的 概念 


天 键 帧 


天 键 帧 在 很 多 动画 系统 都 有 定义 。 天 键 帧 中 包含 了 一 些 自 定 义 的 状态 ， 每 个 状态 都 会 定义 一 些 不 同 的 属性 


值 ， 然 后 在 这 些 状态 之 间 ， 浏 览 器 会 目 动 插入 一 些 值 (通过 过 渡 的 方式 ) 。 


比如 ， 我 们 可 以 定义 这 样 的 一 个 关键 帧 : 


Qkeyframes breath ( 


096 { 

opacity: 1; 
j 
50% { 

opacity: .3; 
j 
100% { 

opacity: 1; 
j 


这 个 关键 帧 的 名 字 为 breath, TAA 0% 的 时 候 ， 不 透明 度 为 1， 50% 的 时 候 为 0.3， 100% 的 时 候 又 恢复 到 


1。 定 义 好 关键 帧 之 后 ， 我 们 需要 通过 animation 属性 来 使 用 它 : 


.Circle { 
animation: breath 2s ease-in-out infinite; 


} 
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我 们 指定 animation 的 一 些 参数 : FAIRER mM, zh Kup, DAPh A, a EBTRIRAM 


等 。 这 些 参 数 可 以 分 别 指定 : 


animation-delay 从 加 载 到 执行 动画 间 的 延迟 ， 软 认 无 延迟 
animation-direction 动画 播放 完成 之 后 ， 重 播 的 起 始 方向 
animation-duration 动画 播放 周期 时 长 
animation-iteration-count 重复 次 数 

animation-name 关键 帧 名 称 


I AeA NEB 


比如 下 面 这 个 属性 指定 : 使 用 breath Kim, MA2sA AH, ARKAA ease-in-out ， 然 后 无 限 循环 播 


放 。 


animation: breath 2s ease-in-out infinite; 


我 们 再 来 定义 一 个 跳动 的 效果 : 


Qkeyframes beat ( 
096 { 
transform: scale(1); 


j 


5096 ( 
transform: scale(1.2); 


j 
100% { 


transform: scale(1); 


j 


然后 在 某 个 元 素 中 使 用 这 个 关键 帧 : 


.Circle { 
animation: beat 2s ease-in-out infinite; 


j 


实例 


有 了 这 些 基础 知识 ， 我 们 就 可 以 来 进行 一 些 实例 的 开发 了 。 这 里 有 一 组 非常 有 趣 的 动画 ， 设 计 病 提供 的 是 


GIF 格 式 的 图 片 。 为 了 完成 动画 ， 我 们 首先 需要 设计 炳 提供 的 乘 材 集 : 所 有 动画 元 素 的 原 图 。 
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Design Survey Analysis 


Collect Data 





Process Data Write Report 





Dessimination 





以 打印 机 这 个 动画 为 例 ， 我 们 需要 一 个 纸张 ， 一 个 连 杆 ， 还 有 打印 机 的 基 座 : 


























bg.png handlebar.png 





typewritter.png 


有 了 这 些 基 础 元 素 ， 我 们 首先 需要 将 各 个 元 素 按 照 静 态 的 方式 摆 放 


«section class-"typing"» 
«div class="typewritter"></div> 
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paper.png 


首先 需要 定义 合理 的 DOM 结 构 : 
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«div class="handlebar "></div> 
<div class="paper"></div> 
</section> 


AR Ie RI DLAT SARAT : 


typing { 
background-color: ZCBADDA; 
width: 220px; 
height: 220px; 
border: none; 
border-radius: 5096; 
position: relative; 


.typewritter { 
position: absolute; 
background-image: url('/images/typing/typewritter.png'); 
background-size: cover; 
width: 144px; 
height: 107px; 
top: 120px; 
left: 38px; 
z-index: 3; 


.handlebar { 
position: absolute; 
background-image: url('/images/typing/handlebar.png'); 
background-size: cover; 
width: 169px; 
height: 28px; 
top: 108px; 
left: 26px; 
z-index: 1; 


.paper ( 
position: absolute; 
background-image: url('/images/typing/paper.png!'); 
background-size: cover; 
width: 127px; 
height: 106px; 
top: 50px;, 
left: 40px; 
z-index:2; 


这 个 例子 中 的 图 片 尺 寸 都 是 按照 设计 病 提 供 的 为 准 。 通 过 将 容器 元 素 .typing 的 position 属性 设置 
为 relative ， 所 有 的 子 元 素 的 position 属性 设置 为 absolute ， 然 后 通过 绝对 定位 来 定位 。 我 们 只 需 
调整 元 素 的 top/left 即 可 完成 初步 的 布局 : 
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动 起 来 : 


让 连 杆 动 起 来 看 起 来 很 容 





易 ， 只 需要 保证 他 左右 摆动 (通过 使 用 转换 ) BU: 


Qkeyframes handlebar ( 


096 1 
transform: 


j 


2596 ( 
transform: 


j 


5096 1 
transform: 


j 


1596 ( 
transform: 


j 


10096 ( 
transform: 


j 


translateX(0); 


translateX(10px); 


translateX(0); 


translateX(-10px); 


translateX(0); 


然后 再 快速 的 应 用 这 个 关键 帧 即 可 : 


.handlebar ( 


animation: handlebar .5s ease-in infinite; 
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可 以 看 到 ， 打 印 机 的 连 杆 动 起 来 了 ， 但 是 我 们 的 帧 分 配 的 太 过 平均 ， 我 们 可 以 植 入 一 些 值 ， 使 得 动画 更 加 


Ag: 
80% { 
transform: translateX(0); 
D 


这 个 帧 插入 后 ， 连 杆 从 759% 到 80% 会 突然 卡 一 下 ， 这 样 看 着 会 更 加 真实 一 些 。 


做 完 连 杆 之 后 ， 我 们 来 做 纸张 的 动画 。 纸 张 的 基本 动作 很 简单 ， 融 是 上 下 移动 : 


Qkeyframes paper ( 
096 { 
transform: translateY(0); 


3096 1 
transform: translateY(-10px); 


5096 1 
transform: translateY(-20px); 


6096 ( 
transform: translateY(-30px); 


8096 1 
transform: translateY(-40px); 


9096 1 
transform: translateY(-45px); 


j 


100% { 
transform: translateY(0); 


I 
Jj 


然后 应 用 这 个 关键 帧 给 ,paper 即 可 : 


.paper { 
animation: paper 2s ease-out infinite; 


j 


为 了 更加 真实 ， 让 纸张 有 跳动 感 ， 我 们 可 以 插入 一 些 帧 ， 让 纸张 在 完成 向 上 的 移动 后 ， 有 一 个 短暂 的 两 
个 像素 ) 回 跳 : 
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Qkeyframes paper 1 


9096 1 
transform: 


3096 1 
transform: 


35% { 
transform: 


50% { 
transform: 


55% { 
transform: 


60% { 
transform: 


65% { 
transform: 


80% { 
transform: 


85% { 
transform: 


90% { 
transform: 


100% { 
transform: 
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translateY(0); 


translateY(-10px); 


translateY(-8px); 


translateY(-20px); 


translateY(-18px); 


translateY(-30px); 


translateY(-28px); 


translateY(-40px); 


translateY(-28px); 


translateY(-45px); 


translateY(0); 


Ji] F8 Sc 8, — T FO LR. e — ERAR : 
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首先 还 是 将 图 层 通过 静态 方式 定位 : 


«section class="mag"> 
<div class="magazine"></div> 
<div class="picture"></div> 
<div class="yellow-bar"></div> 
«div class="blue-bar"></div> 
</section> 


我 们 定义 了 4 个 元 乘 ， 左 边 的 图 标 ， 右 边 的 图 标 ， 两 个 小 的 指示 器 。 对 应 的 CSS 为 : 


.mag { 
background-color: #6A9ACE; 
width: 220px; 
height: 220px; 
border: none; 
border-radius: 5096; 
position: relative; 
overflow: hidden; 


.magazine ( 
position: absolute; 
background-image: url('/images/dissemination-assets/magazine.png'); 
background-size: cover; 
width: 139px; 
height: 157px; 
top: 36px; 
left: 30px; 
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.picture ( 


position: absolute; 

background-image: url('/images/dissemination-assets/pic.png'); 
background-size: cover; 

width: 94px; 

height: 88px; 

top: 94px; 

left: 108px; 


.yellow-bar { 


position: absolute; 

background-image: url('/images/dissemination-assets/yellow.png'); 
background-size: cover; 

width: 27px; 

height: 9px; 

top: 116px; 

left: 166px; 


.blue-bar { 


position: absolute; 

background-image: url('/images/dissemination-assets/blue.png'); 
background-size: cover; 

width: 25px; 

height: 14px; 

top: 154px; 

left: 164px; 


首先 来 看 左边 的 图 表 ， 仔 细 观 察 GIF 会 发 现 ， 当 图 标 移动 到 位 置 之 后 ， 还 会 向 回 弹 一 点 。 这 个 效果 模拟 了 现 
实 世界 中 的 重力 ， 显 得 更 加 真实 。 这 个 图 表 会 略微 停留 一 点 时 间 ， 然 后 消失 ， 仔 细 观 察 发 现 它 运动 的 时 间 
大 约 占 所 有 时 间 的 30% 左 右 ， 因 此 我 们 需要 它 在 30% 前 就 完成 所 有 的 动作 ， 然 后 停留 剩余 的 70% 时 间 。 


Qkeyframes right-jump ( 


0% { 


25% 


top: -50px; 
left: -150px; 
transform: rotate(0deg); 


! 


transform: rotate( -20deg); 


{ 


transform: rotate(-10deg); 


d 


transform: rotate(-3deg); 


i 
top: 36pX; 
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left: 30px; 

transform: rotate(5deg); 
j 
3096 ( 

top: 36pX; 

left: 30px; 

transform: rotate(0deg); 
j 
10096 1 

display: none; 
j 


开始 时 ， 元 素 位 于 一 个 不 可 见 的 位 置 ， 到 达 15% 的 时 候 ， 它 会 着 时 针 旋 转 20 度 ， 由 于 这 时 候 元 素 还 不 可 见 
(容器 元 素 的 限定 了 overflow 为 hidden) ， 因 此 这 里 相当 于 重新 设置 了 元 素 的 初始 状态 。18% 的 时 候 逆 时 针 
旋转 18 度 ， 相 对 于 上 一 个 状态 。 它 事实 上 是 顺 时 针 旋 转 了 2 度 。 一 着 到 25%， 元 素 旋 转 了 25 度 。 然 后 紧 接 着 


在 30% 的 时 候 ， 我 们 让 元 素 旋 转 到 0 度 ， 这 相当 于 向 回转 。 


这 样 ， 该 元 素 束 会 相对 较 慢 的 旋转 到 指定 位 置 ， 然 后 像 亲 车 时 的 惯性 一 样 弹 回 到 最 终 位 置 。 罗 认 的 ，rotate 


是 根据 元 素 的 中 心 为 动画 基准 点 的 ， 我 们 需要 以 元 素 的 左下 角 为 基准 点 ， 因 此 需要 设置 transform- 


origin 属性 为 bottom left : 


.magazine { 


animation: 


同 祥 ， 右 边 稍 小 一 点 的 图 表 也 可 以 应 用 类 似 的 动画 效果 : 


Qkeyframes left-jump (1 
096 { 


40% 


44% 


48% 


52% 


top: 100px; 
left: 260px; 
transform: rotate(0); 


{ 

top: 100px; 

left: 260px; 

transform: rotate(8deg); 


l 

top: 95Dx; 

left: 230px; 

transform: rotate(6deg); 


l 

top: 90px; 

left: 200px; 

transform: rotate(4deg); 


{ 
Eopz 85px; 
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right-jump 2s ease-in-out infinite; 
transform-origin: bottom left; 
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left: 170px; 
transform: rotate(2deg); 


J 
56% { 
top: 90px; 
left: 140px; 
transform: rotate(0deg); 
J 
6096 ( 
top: 96px; 
left: 106px; 
transform: rotate(-3deg); 
J 
6596 ( 
top: 94px; 
left: 108px; 
transform: rotate(0); 
J 
100% { 
top: 94px; 
left: 108px; 
display: none; 
J 


最 后 ， 两 个 小 图 例 是 一 个 缩放 的 动画 ， 但 是 时 机 需要 正好 在 较 小 的 图 和 表 融 位 之 后 。 


Qkeyframes bar ( 
096 { 
transform: scale(0); 


j 
8096 1 

transform: scale(0); 
j 
90% { 

transform: scale(1); 
} 
95% { 

transform: scale(1); 
} 
100% { 

display: none; 
} 


由 于 这 两 个 图 例 出 现 的 时 机 比较 晚 ， 我 们 需要 将 实际 缩放 的 时 机 拖 后 ， 即 ， 在 80% 的 时 候 ， 


sacle 的 参数 


还 是 0， 相 当 于 在 它 的 整个 动画 周期 中 ， 动 画 和 启动 的 时 机 会 延 后 ， 这 样 它 融 可 以 和 其 他 的 元 素 动 画 同 步 起 来 


fe 


.yellow-bar { 
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animation: bar 2s ease infinite; 


j 


.blue-bar ( 


animation: bar 2s ease infinite; 
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附录 : 使 用 CSS 框 架 


虽然 我 们 可 以 通过 完全 手写 的 方式 来 完成 页 面 的 布局 ， 过 渡 动 田 ， 配 色 等 ， 但 是 有 时 候 这 些 过 程 比较 繁 
琐 ， 特 别 是 涉及 到 响应 陈设 计 之 后 ， 我 们 需要 考虑 如 何 为 不 同 的 屏幕 尺寸 配置 不 同 的 百分比 。 


使 用 CSS 框 架 可 以 简化 这 些 工 作 ， 特 别 是 关于 布局 和 响应 式 设 计 的 部 分 。 目 前 已 经 有 很 多 的 相关 框架 ， 比 
如 应 用 最 为 广泛 的 Bootstrap，Foundation，Pure CSS 等 等 。 使 用 框架 可 以 大 大 简化 页 面 的 开发 进程 。 
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